react-生命周期
首先,看一下一个组件的构造
constructor参数接受两个参数props,context。如果你想在constructor构造函数内部使用props或context,则需要传入。
只要组件存在constructor,就必要要写super,否则this指向会错误
React组件提供了生命周期
的钩子函数
去响应组件不同时刻的状态,组件的生命周期
如下:
- 装载过程(Mount),组件第一次在DOM树渲染的过程,在这里完成了组件的加载和初始化;
- 更新过程(Update),当组件被重新渲染的过程。这个阶段组件可以处理用户交互,或者接收事件更新界面;
- 卸载过程(Unmount),组件从DOM树中删除的过程。这里做一些组件的清理工作。
执行这3个过程的调用函数就是声明周期函数。
装载过程
该过程会依次调用如下函数:
constructor()
:
ES6类的构造函数(为了初始化state
或绑定this
)
getInitialState()
:
作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state(ES5)
,此时可以访问this.props
。
getDefaultProps()
:ES5中初始化props
。在ES6中使用defaultProps()
方法。
作用于组件类,只调用一次,返回对象用于设置默认的props
,对于引用值,会在实例中共享。
componentWillMount()
:
在完成首次渲染(组件被挂载前)之前调用,只执行一次。
render()
:渲染组件,创建虚拟DOM,必须实现该方法。该方法具有特殊的规则:
只能通过this.props
和this.state
访问数据
可以返回null
、false
或任何React组件
只能出现一个顶级组件(不能返回数组)
不能改变组件的状态
不能修改DOM的输出
componentDidMount()
:
真实的DOM被渲染出来后(组件装载后)调用,在该方法中可通过this.getDOMNode()
访问到真实的DOM元素。此时已经生成了真实的DOM节点,可以使用其他类库来操作这个DOM。只执行一次。
更新过程
当组件的props或者state改变时就会触发组件的更新过程。
【
在react中,触发render的有4条路径。
以下假设shouldComponentUpdate都是按照默认返回true的方式。
- 首次渲染Initial Render
- 调用this.setState (并不是一次setState会触发一次render,React可能会合并操作,再一次性进行render)
- 父组件发生更新(一般就是props发生改变,但是就算props没有改变或者父子组件之间没有数据交换也会触发render)
- 调用this.forceUpdate
】
更新过程会依次执行如下函数:
componentWillReceiveProps(nextProps)
:
组件接收到新的props
时调用,并将其作为参数nextProps
使用,此时可以更改组件props
及state
。
shouldComponentUpdate(nextProps,nextState)
:
当props
改变或state
改变时调用,返回boolean
。true
表示继续执行render
方法,fasle
表示放弃本次渲染。
在首次渲染期间或者调用了forceUpdate
方法后,该方法不会被调用
【
forceUpdate (callback)
默认情况下,当组件的state或props更改时,组件将重新呈现。如果render()方法依赖于某些其他数据,
可以通过调用forceUpdate()来告诉React该组件需要重新呈现。
调用forceUpdate()将导致在组件上调用render(),跳过shouldComponentUpdate()。
这将触发子组件的正常生命周期方法,包括每个子组件的shouldComponentUpdate()方法。如果标记更改,则React仍将仅更新DOM。
应该尽量避免使用forceUpdate(),只能从render.()中的this.props和this.state读取。
】
-
componentWillUpdate
接收到新的props
或者state
后,进行渲染之前调用,此时不允许更新props
或state
。
- componentDidUpdate
完成渲染新的props
或者state
后调用,此时可以访问到新的DOM元素。
render()
:渲染组件。
卸载过程
componentWillUnmount()
:
组件被移除之前被调用,可以用于做一些清理工作,防止内存溢出。在componentDidMount
方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。
生命周期的回调函数总结: