React生命周期函数详解
React的生命周期主要有3个过程
- 装载过程 Mount 组件第一次在DOM中渲染
- 更新过程 Update 组件重新渲染
- 卸载过程 UnMount 组件从DOM中移除
装载过程
constructor
初始化,绑定this
getInitialState (React.createClass)
初始化state
getDefaultProps (React.createClass)
初始化props
componentWillMount
很少使用这个,因为这里setState也不会导致重新渲染,这里的事情可以在构造函数中完成
render
render应该是一个纯函数,完全根据state和props来决定返回结果,而不产生副作用,所以render中调用setState是错的,因为纯函数不应该引起状态的改变
componentDidMount
这个函数调用的时候render函数已经把JSX渲染好了,一般来说我们的请求都是在这个函数中来调用
更新过程
componentWillReceiveProps
只要是父组件的render函数被调用,在render里渲染的子组件就会经历更新过程,不管父组件传递给子组件的props有没有改变,都会触发componentWillReceiveProps
shouldComponentUpdate
应该是除了render之外最重要的函数了。它决定了一个组件什么时候需不需要渲染。
render和shouldComponentUpdate是React中唯二需要有返回值的函数,shouldComponentUpdate返回一个布尔值,告诉React是否需要继续更新,若为true则继续,为false则停止更新,不会触发之后的重新渲染componentwillUpdate
即将render的时候执行
- render
- componentDisUpdate
组件渲染完毕后执行
卸载过程
- componentWillUnmount