React学习笔记3

笔记（2019.6.16）

生命周期函数

组件加载的时候触发的函数

1. 构造函数constructor
2. componentWillMount()组件将要挂在的时候触发的生命周期函数
3. 数据渲染render
4. compomentDidMount()组件挂载完成的时候触发的生命周期函数 （在这个过程可以进行DOM操作，或者请求数据）

组件更新的时候触发的函数

1. shouldComponentUpdate(nextProps,nextState)是否要更新数据（return为true才会更新数据）(nextProps是父组件传来的值，nextState是更新后的state属性 )
2. componentWillUpdate()将要更新数据的时候触发
3. 数据渲染render
4. componentDidUpdate()组件完成更新

组件摧毁的时候触发的函数

1. componentWillUnmount()将要摧毁的时候触发（用在组件销毁的时候执行操作 ）

父组件改变props的值的时候触发的函数

1. 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路由跳转

模拟登陆功能

1. 需要引入Redirect组件(improt {Redirect} from 'react-router-dom')
2. 定义一个flag默然false（在state中定义一个flag，当登陆成功后将flag赋值为true）
3. 在render中做if判断，判断flag为true时，进行跳转
4. 使用<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} />
	}
})