React——组件的生命周期函数

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

每一个组件都有一些生命周期函数。

当组件实例被创建并且会插入到DOM中，下面这些函数会被调用

constructor

componentWillMount

render

componentDidMount

改变组件的state或props会导致更新，当重新渲染组件时会调用下面这些方法

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

当组件从DOM中移除，会调用下面的方法

componentWillUnmount

一.render()

render方法是必须的，render的返回值是下面的类型：
(1)react元素：要么是自定义的组件要么是原生的DOM组件
(2)字符串或者数字:会被渲染成DOM中的文本节点
(3)Portals:通过ReactDOM.createPortal创建
(4)null:什么都不会渲染
(5)Boolean:什么都不渲染
(6)包含多个元素的数组

render(){
return [
<li key='1'>1</li>,
<li key='2'>2</li>
]
}

render方法应该是简单的，在render中不能修改组件的state，每一次调用render都会返回一个新的结果。并且在render中也不能与浏览器进行交互，如果需要与浏览器交互，就在componentDidMount或者其他生命周期函数中执行。

二.constructor(props)

react组件的构造函数在组件装载之前调用。如果没有显示的定义constructor，那么在实例化组件时会调用默认的constructor，如果在React.Component的子类中显示的定义了constructor，那么就要在constructor中最开始调用super(props).
在构造函数中实例化state是一个很好的选择。下面举例一段代码

constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}

在react中使用props初始化state是合法的，但是这存在一个问题：当props被更新时，state并不会被更新。解决的方法是：在组件的componentWillReceiveProps(nextProps)中用新的props更新state。虽然这能解决问题，但是并不推荐，推荐把state提升到最近的公共父组件中

三.componentWillMount()

当装载发生之前会立即调用componentWillMount,componentWillMount会在调用render之前被调用，所有在componentWillMount中修改state，不会导致组件的重新渲染。服务器端渲染才会调用这个方法，所有推荐通过constructor代替这个方法。

四.componentDidMount()

当组件被装载完成会立即触发componentDidMount，在这个函数中修改state被导致组件重新渲染。组件被装载之后才能操作DOM。如果你需要加载远程数据，在这个地方发送网络请求是个不错的主意.

五.componentWillReceiveProps(nextProps)

当已经被转载的组件接受新的props之前componentWillReceiveProps会被触发。如果你需要更新state去响应props的更新，可以在这里通过setState方法更新state。当组件首次接受到props，这个方法不会被调用.
注意：props没有被改变也可能会调用这个方法，所有在这个方法中将当前的props去next props进行比较是很有必要的。

六.shouldComponentUpdate(nextState,nextProps)

当新的props或state被接受，在渲染之前会调用shouldComponentUpdate，这个方法默认是返回true，初次渲染和使用forceUpdate，不会调用这个方法。如果shouldComponentUpdate返回false,之后的componentWillUpdate,render以及componentDidMount不会被调用,组件以及他的子组件不会被重新渲染。