
[官方文档 戳这里][reactjs.org/docs/react-…]
react中的每个组件都有几个“生命周期函数”, 他们会在组件的运行过程中的特定时机触发。
react的生命周期函数主要包括三种: 挂载、更新和 卸载。
挂载
这些方法在 创建组件示例并将其插入到DOM中调用。
更新
这些方法在 组件的state或者props发生改变,组件重新渲染时 调用。
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
卸载
这些方法在 组件卸载的时候调用。
render()
返回类型包括以下几种类型:
- react节点
- num或者 string, 将会被渲染成文本节点
- null, 不做渲染
- boolean, 不做渲染
注: shouldComponentUpdate() 返回 false时 不会调用 render()
constructor()
React 的构造函数在挂载之前被调用。
构造函数常被用来进行数据的初始化操作,数据存放在对象 this.state 中。构造函数也经常用于将事件处理程序绑定到类实例。
如果不需要进行初始化状态,也不需要绑定方法,则 构造函数可省略,但是需要注意的是,若在组件中添加了constructor() 方法,则需添加super(props), 否则 this.props会在构造函数中被定义,导致错误。
componentWillMount()
componentWillMount() 在组件被挂载之前被调用。会在render() 方法之前调用。
componentDidMount()
componentWillMount() 在组件被挂载之后立即被调用。
componentWillReceiveProps()
componentWillReceiveProps()在组件接收新的props之前被调用。
如果需要根据props的变化更新state的值,可以通过比较this.props和nextProps和state并通过 this.setState()更新state的值。
本方法会在React组件接受到新的props时才会调用。但是需要注意的是,即使props没有发生变化,React也有可能会触发本函数。比如在父组件导致子组件重新渲染的时候。如果需要真正的处理props的变化,可以通过对this.props 和 nextProps 进行比较来实现。
shouldComponentUpdate()
当组件接收到新的props或state时,在组件渲染之前会先调用shouldComponentUpdate()。
本方法用于告诉 React 组件是否需要重新渲染。
在shouldComponentUpdate() 返回true,则组件会重新渲染(初始化渲染时除外),反之,组件将不会重新渲染。
componentWillUpdate()
componentWillUpdate()会在组件将要更新之前调用。
需要注意的是,不可在本方法中进行 setState操作。 更新state后,组件在重新渲染之前,会再次调用本方法,会造成程序崩溃。
componentDidUpdate()
在组件更新之后马上调用。
在本方法中也不可进行 setState操作。
componentWillUnmount()
在组件被卸载之前调用。可做一些清除操作。