一:使用安装
第一步:是先全局安装create-react-app
运行:npm install -g create-react-app
第二步:创建项目
运行:create-react-app demo
创建成功效果:
运行命令:cd demo ==> npm start
运行成功效果:
页面:
二:第一个react页面:
三:父子间传值:
父组件代码:
父组件传递数据给子组件: 父组件将需要传递的参数通过key={xxx}
方式传递至子组件,子组件通过this.props.key
获取参数.
父传子子组件代码:
子传递数据给父组件:
子传父子组件代码:子通过props传递,要求父提前给子传递一个函数
效果:
消息订阅与发布:
引入第三方插件:PubSubJS
1.先订阅,再发布(理解:有一种隔空对话的感觉)
2.适用于任意组件间通信
3.要在组件的componentWillUnmount中取消订阅
引入:import PubSub from 'pubsub-js'
发布:PubSub.publish('atguigu',{isShow:false})
订阅:
componentDidMount(){
this.token = PubSub.subscribe('atguigu',(_,stateObj)=>{
this.setState(stateObj)
})
}
取消订阅:
componentWillUnmount(){
PubSub.unsubscribe(this.token)
}
四.路由导航:
路由的基本使用
安装路由:npm install -S react-router-dom
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>//选择路由模式
代码:
效果:
匹配路由:
有两种路由匹配组件:<Route>
和 <Switch>
Switch的使用:
1.通常情况下,path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</Switch>
路由的严格匹配与模糊匹配
1.默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且顺序要一致)
2.开启严格匹配:<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
NavLink与封装NavLink
1.NavLink可以实现路由链接的高亮,通过activeClassName指定样式名
解决多级路径刷新页面样式丢失的问题
1.public/index.html 中 引入样式时不写 ./ 写 / (常用)
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)
3.使用HashRouter
Redirect的使用
1.一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由
2.具体编码:
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
嵌套路由
1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
向路由组件传递参数
1.params参数
路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>
接收参数:this.props.match.params
2.search参数
路由链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
接收参数:this.props.location.search
备注:获取到的search是urlencoded编码字符串,需要借助querystring解析
3.state参数
路由链接(携带参数):<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
接收参数:this.props.location.state
备注:刷新也可以保留住参数
代码:https://github.com/baiwenzi/react-routerhttps://github.com/baiwenzi/react-router
效果:
五.组件的生命周期
(1)挂载阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount() =====> 常用
,例如:开启定时器、发送网络请求、订阅消息
(2)更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
(3)卸载阶段:由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
关闭定时器、取消订阅消息