【学习笔记 】React ④ 生命周期以及使用场景

组件生命周期

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（） 中。

（完）