React学习笔记3
笔记(2019.6.16)
生命周期函数
组件加载的时候触发的函数
- 构造函数constructor
componentWillMount()
组件将要挂在的时候触发的生命周期函数- 数据渲染render
compomentDidMount()
组件挂载完成的时候触发的生命周期函数 (在这个过程可以进行DOM操作,或者请求数据)
组件更新的时候触发的函数
shouldComponentUpdate(nextProps,nextState)
是否要更新数据(return为true才会更新数据)(nextProps是父组件传来的值,nextState是更新后的state属性 )componentWillUpdate()
将要更新数据的时候触发- 数据渲染render
componentDidUpdate()
组件完成更新
组件摧毁的时候触发的函数
componentWillUnmount()
将要摧毁的时候触发(用在组件销毁的时候执行操作 )
父组件改变props的值的时候触发的函数
componentWillRecieveProps()
简单的react-router配置(4.x)
类似于vue-router,react-router可以让根组件动态去挂载不同的其他组件,根据用户访问的地址动态的加载不同的组件。
&npm install react-router-dom --save
import React, { Component } from 'react';
import './App.css';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './components/Home';
import Topic from './components/Topic';
class App extends Component {
render() {
return (
<Router>
<div>
<Link to="/" >首页</Link>
<Link to="/topics" >话题</Link>
<Route exact path="/" component={Home} />
<Route path="/topics" component={Topic} />
</div>
</Router>
);
}
}
export default App;
这里的路由跳转用到的是<Link to="/"></Link>
类似于vue的router-link
react-router的动态路由
和vue中的操作基本差不多,动态路由的配置:
<Route path="/topicsContent/:tid" component={topicsContent} />
然后在Link中:(这里用到的是es6模板字符串)
<Link to={`/topicsContent/${value.tid}`}>topic xxx 详情</Link>
获取路由传值
this.props.match.params.tid
react-router的动态路由的get传值
get传值就是 /topicsContent?tid=12345
获取tid
在Link中:(这里用到的是es6模板字符串)
<Link to={`/topicsContent?tid=${value.tid}`}>topic xxx 详情</Link>
获取路由传值
this.props.location.search
但是呢,得到的是 ?tid=12345
,我们还需要去封装函数,把后面的12345获取到。
可以使用url模块
,使用url来进行解析,使用url.parse(this.props.location.search,ture).query.tid
就可以获取到啦
相比于vue,react的获取路由传值稍微繁琐一点
笔记(2019.6.17)
使用js路由跳转
模拟登陆功能
- 需要引入
Redirect
组件(improt {Redirect} from 'react-router-dom'
) - 定义一个flag默然false(在state中定义一个flag,当登陆成功后将flag赋值为true)
- 在render中做
if
判断,判断flag为true时,进行跳转 - 使用
<Redirect to={{pathname : "/"}} />
或<Redirect to='/' />
进行跳转到主页
嵌套路由 (4.x)
1.嵌套路由中 <Route exact path="/user/" componengt={Main} />
其中exact
代表严格匹配。例如,当有两个path时,一个为path="/user/info"
另一个为path="/user/"
当不加exact
属性是,匹配到/user/info
时也会匹配到/user/
,这样就会出现两个组件。
2.嵌套路由也可以这样写:<Route exact path={${this.props.match.url}/info component={Info} />
对${this.props.match.url}/info
使用模板字符串,其代表父级路由地址
路由模块化Model
把原来使用的格式,一个个的<Route exact path="/user/" componengt={Main} />
改为:
let routes = {
{
path="/user/",
component: Main,
exact:true
},
...
}
可以把这个数组封装成一个js,然后export暴露出来,在app.js中再import该js文件
然后在<Router>
中去循环这个数组
routes.map((route,key)=>{
if(route.exact){
return <Route key={key} exact path={route.path} component={route.component} />
}else{
return <Route key={key} path={route.path} component={route.component} />
}
})
! 嵌套路由模块化Model !
let routes = {
{
path="/user",
component: User,
exact:true,
routes:[
{
path:"/user/",
component:UserList
},
...
]
},
...
}
这时循环渲染Route时就要涉及到父子组件的传值了:
return <Route key={key} exact path={route.path}
render = {props =>(
<route.component {...props} routes={route.routes} />
)}
/>
然后在子组件中,再像原来一样渲染<Route>
:
this.props. routes.map((route,key)=>{
if(route.exact){
return <Route key={key} exact path={route.path} component={route.component} />
}else{
return <Route key={key} path={route.path} component={route.component} />
}
})