react组件生命周期

前面的话

　　本文将详细介绍react组件生命周期

 

概述

　　每一个组件都有几个可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用，而带有前缀 did 的方法则会在特定环节之后被调用

【装配】

　　这些方法会在组件实例被创建和插入DOM中时被调用：

constructor()
componentWillMount()
render()
componentDidMount()

【更新】

　　属性或状态的改变会触发一次更新。当一个组件在被重渲时，这些方法将会被调用：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

【卸载】

　　当一个组件被从DOM中移除时，该方法被调用：

componentWillUnmount()

 

装配过程

【render()】

　　render()函数应该纯净，意味着其不应该改变组件的状态，其每次调用都应返回相同的结果，同时不直接和浏览器交互。若需要和浏览器交互，将任务放在componentDidMount()阶段或其他的生命周期方法

【constructor(props)】

　　React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时，应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常

【componentWillMount()】

　　这是唯一的会在服务端渲染调起的生命周期钩子函数。通常地，推荐使用constructor()来替代

【componentDidMount()】

　　componentDidMount()在组件被装配后立即调用。初始化使得DOM节点应该进行到这里。若需要从远端加载数据，这是一个适合实现网络请求的地方。在该方法里设置状态将会触发重渲

 

更新及卸载

【componentWillReceiveProps(nextProps)】

　　componentWillReceiveProps()在装配了的组件接收到新属性前调用。若需要更新状态响应属性改变（例如，重置它），可能需对比this.props和nextProps并在该方法中使用this.setState()处理状态改变

　　[注意]即使属性未有任何改变，React可能也会调用该方法

【shouldComponentUpdate(nextProps, nextState)】

　　使用shouldComponentUpdate()可以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下应该依赖于默认行为

　　当接收到新属性或状态时，shouldComponentUpdate() 在渲染前被调用。默认为true

　　若该方法返回false，则componentWillUpdate()、componentDidUpdate()、render()将不会被调用

　　[注意]该方法并不会在初始化渲染或当使用forceUpdate()时被调用

【componentWillUpdate(nextProps, nextState)】

　　当接收到新属性或状态时，componentWillUpdate()在渲染前被立即调用。在更新发生前，使用该方法是一次准备机会。该方法不会在初始化渲染时调用。

　　[注意]不能在这调用this.setState()，若需要更新状态响应属性的调整，使用componentWillReceiveProps()代替

【componentDidUpate(prevProps, prevState)】

　　componentDidUpdate()会在更新发生后立即被调用。该方法并不会在初始化渲染时调用。当组件被更新时，使用该方法是操作DOM的一次机会。这也是一个适合发送请求的地方

【componentWillUnmount()】

　　componentWillUnmount()在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素

 

强制渲染

【component.forceUpdate(callback)】

　　默认情况，当组件或状态发生改变，组件将会重渲。若render()方法依赖其他数据，可以通过调用forceUpdate()来告诉React组件需要重渲

　　调用forceUpdate()将会导致组件的 render()方法被调用，并忽略shouldComponentUpdate()。这将会触发每一个子组件的生命周期方法，涵盖每个子组件的shouldComponentUpdate() 方法。若当标签改变，React仅会更新DOM

　　通常应该尝试避免所有forceUpdate() 的用法并仅在render()函数里从this.props和this.state读取数据