当前位置: 首页 > Web前端 > HTML

【前端打怪升级--LV.1】react基础内容

时间:2023-04-02 19:27:53 HTML

react使用教程变量usingconstructor(props){super(props);this.state={sliderSwiper:null,movies:[]};this.handleStart=this.handleStart.bind(this);}if(!baseHref){if(isPc){window['location']['href']=`${location.protocol}//${location.host}/demo/home`;return;}if(!isPc){window['location']['href']=`${location.protocol}//${location.host}/m/home`;return;}}else{if(isPc&&baseHref==='m'){window['location']['href']=`${location.protocol}//${location.host}/demo/home`;return;}if(!isPc&&baseHref==='demo'){window['location']['href']=`${location.protocol}//${location.host}/m/home`;return;}}父组件传参给子组件this.props.xxx子传参给父组件//父组件//子组件clickFun(text){this.props.pfn(text)//这里传值给props的事件}点我组件判断渲染constisLoggedIn=这个.state.isLoggedIn;让按钮=空;如果(isLoggedIn){button=;}else{button=;}return(

{button}
);}组件循环渲染arr.map((element,index)=>{return
{index}
})react生命周期componentWillMount在渲染之前被调用,在客户端和服务器端componentDidMount:在第一次渲染后调用,仅在客户端调用。componentWillReceiveProps在组件接收到新的道具(更新)时被调用。初始化渲染时不会调用此方法。shouldComponentUpdate返回一个布尔值。当组件接收到新的道具或状态时调用。在初始化期间或使用forceUpdate时不调用。当组件接收到新的道具或状态但尚未呈现时调用componentWillUpdate。在初始化期间不会被调用。componentDidUpdate在组件完成更新后立即调用。在初始化期间不会被调用。componentWillUnmount在组件从DOM中移除之前立即被调用。refs的使用和vue类似this.refs.myInput.focus();react由的使用//传递和接收[react跳转和参与数据接收](https://blog.csdn.net/qq_24504591/article/details/78973633)//routers.jsimportReact,{Component}from'react';import{HashRouterasRouter,Route,Switch,Redirect}from'react-router-dom';从'./views/Home'导入主页从'./views/List'导入列表;从'./views/Board'导入板;从'./views/Item'导入项目;从'./views/Item'导入搜索'./views/Search';classRoutesextendsComponent{render(){return(
);}}exportdefaultRoutes;//如何跳转//importRoutesfrom'./routes'inindex.js;ReactDOM.render(,document.getElementById('root'));reactcomponenttypestaticComponentfunctionHelloMessage(props){return

Hello{props.name}!

;}}2.动态组件类ListextendsComponent{render(){return(
);}}z项目使用scssnpmisass-加载程序node-sass--save-dev