React生命周期

组件生命周期：

• getInitialState
  • 初始化this.state的值，只在组件装载之前调用一次
  • 如果是使用ES6，可以在构造函数中初始化状态
• getDefaultProps
  • 即预先定义好的对象值
  • 只在组建创建时调用一次并缓存返回的对象（即在React.createClass之后就会被调用）
  • 因为这个方法在实例化之前调用，所以在这个方法里不能依赖this获取组件的实例
  • 如果是ES6，直接定义defaultProps这个类属性来替代
    • Counter.defaultProps = {initialCount: 0}

生命周期函数

装载组件触发

• componentWillMount
  • 新版本UNSAFE_compoentWillMount
  • 组件将要渲染
  • 只会在装载前调用一次，在render之前调用，可以在这个方法里调用setState改变状态，并且不会导致额外调用一次render
  • 一般用于AJAX
• compoentDidMount
  • 组件渲染完毕
  • 只会在装载完成之后调用一次，在render之后调用，从这里开始可以通过ReactDOM.findDOMNode(this)获取组件的DOM节点

更新组建触发

这些方法不会在首次render组件的时候触发

• componentWillReceiveProps
  • UNSAFE_
  • 组件将要接受props数据
  • 查看props是什么
• shouldComponentUpdate
  • 组件接受到新的state或props，判断是否更新，返回布尔值
• componentWillUpdate
  • UNSAFE_
  • 组件将要更新
• componentDidUpdate
  • 组件已经更新

卸载组建触发

• componentWillUnMount
  • 组件将要卸载

React生命周期（旧）：

React生命周期（新）：

3个不常用的生命周期，了解：

• shouldComponentUpdate(nextProps, nextState)：每当this.props或this.state有变化，在render方法执行之前，就会调用这个方法。该方法返回一个布尔值，表示是否应该继续执行render方法。组件挂载时，render方法第一次执行，不会调用这个方法；
• static getDerivedStateFromProps(nextProps, prevState)：该方法在render方法执行之前调用，包括组件第一次挂载。它应该返回一个新的state对象，通过在组件状态依赖外部输入的参数的情况（为什么不直接通过props计算？）；
  • 需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。（即对state不做任何操作）
  • 使用场景：
    • 半受控组件，即用户不传入值时使用默认值
    • 无条件地根据props来更新内部state，也就是只要有传入props值，就更新state（但是无条件从props中更新state，我们完全没有必要使用这个生命周期，直接对props值进行操作就行了，无需用state保存）
    • 只有props和state值不同时才更新state值
• getSnapshotBeforeUpdate():该方法在每次DOM更新之前调用，用来收集DOM信息。它返回的值，将作为参数传入componentDidUpdate()方法作为第三个参数。

附加：

• componentDidMount
  • 典型场景：ajax获取外部资源（组件只需获取一次的场景下）
• componentWillUnMount
  • 典型场景：资源释放
• getSnapshotBeforeUpdate
  • 典型场景：获取render之前的DOM状态（下面解释为什么需要获取）
  • 在页面render之前调用，state已更新
• componentDidUpdate
  • 典型场景：页面需要根据props变化重新获取数据（如在这个方法里根据传入的id获取新的内容）
  • 每次UI更新时被调用
• shouldComponentUpdate
  • 典型场景：性能优化
  • 决定Virtual DOM是否需要重绘
  • 一般可以由PureComponent自动实现（浅比较props和state是否变化）

使用getSnapShotBeforeUpdate（返回的参数会作为componentDidUpdate的第三个参数snapshot）：

• 场景：每一秒在页面顶部更新一条消息，如果我们想看下面的内容，新消息更新会使滚动条不断往上滚动。
  使用getSnapShotBeforeUpdate记录更新前后的scrollTop，使其固定（也可以直接给div加上key，这里主要展示该方法可以在update前获取dom状态）：

ref = {node => this.rootNode = node}
// ref可以获取原生节点的引用，在这里获取后给rootNode进行保存，供后续访问

// 返回上一次的内容的高度 scrollHeight
getSnapShotBeforeUpdate() {
    return this.rootNode.scrollHeight
}

// scrollTop + 内容增加的高度
componentDidUpdate(prevProps, prevState ,snapshot) {
    this.rootNode.scrollTop = this.rootNode.scrollTop + (this.rootNode.scrollHeight - snapshot)
}