react navigation replace不跳转页面_前端必备：React的生命周期和路由

本文作者：开课吧木木
图文编辑：开三金

接上一期分享的react组件之状态与通信：

老规矩，传送门送上：

如何精通react组件的状态和通信？

本期为大家讲解react生命周期and路由。

React生命周期

第一个是组件初始化阶段：

super(props)用来调用基类的构造方法(constructor())。

同时，也将父组件的props注入给子组件，供子组件读取(组件总props只读不可变，state可变)

而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

第二个是组件的挂载阶段：

componentWillMount: 

在组件挂载到DOM前调用，且只会被调用一次。

在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前放到constructor()中，所以项目中很少用。

render: 

根据组件的props和state(无论两者的重传递和重赋值。

论值是否有变化，都可以引起组件重新render),return一个React元素 (描述组件，即UI)，不负责组件实际渲染工作。

之后由React自身根据此元素去渲染出页面DOM。

render是纯函数(函数的返回结果只依赖它的参数；

函数执行过程里面没有副作用)，不能在里面执行this.setState,会有改变组件状态的副作用。

componentDidMount: 组件挂载到DOM后调用，且只会被调用一次。

第三个是组件的更新阶段：

在讲述此阶段前需要先明确下react组件更新机制。

setState引起的state更新或父组件更新render引起的props更新。

更新后的state和props相对之前无论是否有变化，都将引起组件的重新渲染。

造成组成更新有两类(三种)情况：

父组件重新render 父组件重新render引起子组件重新render的情况有两种： 

a. 直接使用,每当父组件重新render导致的重传props，子组件将直接跟着重新渲染。

无论props是否有变化，可通过shouldCo-mponentUpdate方法优化。

b.在componentWillReceiveProps方法中，将props转换成自己的state

在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染。

是因为componentWillReceiveProps中判断props是否变化了。

若变化了，this.setState将引起state变化，从而引起render，此时就没必要再做第二次因重传props引起的render了，不然重复做一样的渲染了。

2.组件本身调用setState，无论state有没有变化。

可通过shouldComponentUpdate方法优化。

此阶段分为：

componentWillReceiveProps，shouldComponentUpdate；

componentWillUpdate，render，compo-nentDidUpdate；

componentW