组件生命周期
React组件的生命周期可分成三个状态：
- Mounting：组件挂载
- Updating：组件更新
- Unmounting：组件卸载
生命周期.png
-
componentWillMount()
在组件即将被挂载到页面的时刻自动执行 -
render()
数据变化自动执行 -
componentDidMount()
组件被挂载到页面之后，自动执行 -
componentWillReceiveProps()
当一个组件从父组件接受一个参数只要父组件的render函数重新被执行，子组件的这个生命周期函数就会被执行。换一种说法，如果这个组件第一次存在与父组件中，不会执行如果这个组件之前已经存在父组件中，才会执行。 -
shouldComponentUpdate()
组件被更新之前会会自动执行 -
componentWillUpdate()
组件被更新之前，它会自动执行，但是它在shouldComponentUpdate ()之后被执行。如果shouldComponentUpdate ()return true，这个函数才会被执行;如果shouldComponentUpdate ()return false，这个函数就不会被执行了. -
componentDidUpdate()
组件更新完成之后会自动执行 -
componentWillUnmount()
当这个组件即将被从页面中剔除的时候
生命周期函数的使用场景
1.在子组件里面使用shouldComponentUpdate()，避免无谓render函数的渲染
首先我们看一下下面这种情况，当不在生命周期函数里面做任何处理的话。在父组件todoList的input中输入文字时，子组件todoItem也会跟着渲染。
但是理想的情况下，todoItem应该只有在点击提交按钮或者删除的时候子组件todoItem才会渲染。
组件-未处理.gif
当传入的内容发生改变时return true，才进行渲染，当内容不发生改变的情况下return false，不对todoItem进行渲染。
shouldComponentUpdate (nextProps, nextState) {
// console.log('child shouldComponentUpdate')
if (nextProps.content !== this.props.content) {
return true
} else {
return false
}
}
效果就变成了了下面这样的情况。提升了性能，避免无谓render函数的渲染
组件-已处理.gif
2.建议将ajax放在componentDidMount（） 中执行。
如果在将ajax放在render（）中会出现死循环。只要页面的props或者state改变，render（）就会被反复执行，ajax就会反复请求。
写网页的时候，把ajax放在componentWillMount()是没有任何问题的，但是如果开发react Native，或者用react Native做服务器的同构，如果在componentWillMount()发送ajax请求，可能会和更高端的技术产生冲突。为了避免这种情况，干脆将ajax放在componentDidMount（） 中。
（完）
网友评论