React框架入门---React.Component 生命周期函数整理

什么是生命周期函数

1. 组件中在某个阶段会自动执行的函数。

• 比如我们执行使用render函数，在prop或者state变化时，render函数自动执行,因此render函数就是一个生命周期函数。
  生命周期分为4个阶段

1. initialization（组件初始化）

我们在创建组件的时候需要继承react Component这个基类，也就继承这个react的基类，才能有render(),生命周期等方法可以使用，这也说明为什么函数组件不能使用这些方法的原因。同时也让组件能使用setState方法。

• 然后我们在 constructor 构造函数中使用 super(props)来将父组件传递的props注入给这个组件，以及使用this.state初始化这个组件的属性。
• 这一系列动作就是组件的初始化。

2. mount (组件的挂载)

此阶段分为三个时期
1. componentWillMount(挂载之前)

• 这个函数在组件挂载到DOM之前的时候执行，所以你在这里引用setState方法，是不会引起组件的重新渲染。
• 同样这里做的事情如果放在constructor构造函数中去使用也是可以的。
• 这个函数只会被调用一次，就是组件挂载到DOM之前的时候。其他时候是不会触发这个函数的。

2. render(挂载中)

• 根据组件的props和state是否变化，变化即执行，这里的变化要注意，并不是值变化。只要重新赋值，新旧值相同也会执行。
• 然后return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用。
• 不能在里面执行this.setState，会有改变组件状态的副作用。

3. componentDidMount(挂载完成)

• 约定将ajax请求放在这个生命周期函数中
• 组件挂载到DOM后被执行，只会执行一次

3. update (组件更新时)

首先我们来了解一下什么时组件更新。只有在通过setState函数使sate和props变化或重新赋值时才叫组件更新。

• setState引起父组件的render函数执行，同时也会引起它的子组件的render函数执行。
• 原因是react虚拟DOM的diff算法，同级比较原理。
• 只要重新赋值就是组件更新，如果值并没有变，也更新组件，这样就会耗性能，也是我们讲同级比较的时候说的一个弊端。

4. Unmount (组件卸载时)

此阶段当前组件在root上卸载,清除时发生的

- 接下来我们了解一下有哪些周期函数

1.constructor(props, context)
构造函数，在创建组件的时候调用一次。
2.componentWillMount()
在组件render之前立即调用
Tip1: 不建议在此请求数据，由于请求数据接口一般都是异步，这时候render已经被执行，建议在componentDidMount 数据

Tip2: 如果在服务端渲染，该钩子函数将被调用两次，一次服务端，一次浏览器端，而componentDidMount函数只会在浏览器端请求一次

Tip3: 在taro构建的小程序里对应的生命周期是 onLoad。

3. componentDidMount()
所有的组件（包括子组件）在render执行完之后立即调用，并且只会被调用一次。
Tip: 建议在此请求数据

4. componentWillReceiveProps(nextProps)
在props被改变时被触发，初始化render时不调用。
旧的属性还是可以通过this.props来获取，在这里通过调用this.setState()来更新你的组件状态。
Tip1: 某些情况下，props没变也会触发该钩子函数，需要在方法里手动判断一下this.props和nextProps是否相同，不相同了才执行我的更新方法。

Tip2：该函数一般用来更新依赖props的状态

5. shouldComponentUpdate(nextProps, nextState)
发生重渲染时，在render()函数调用前被调用的函数，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染。
该方法并不会在初始化渲染或当使用forceUpdate()时被调用。
6.componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。
7. getSnapshotBeforeUpdate(prevProps, prevState)
该函数在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会 作为参数被传递给componentDidUpdate()。
8. componentDidUpdate(prevProps, prevState)
除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
9.componentWillUnmount()
在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。
10.componentDidCatch(error, info)
该函数称为错误边界，捕捉发生在子组件树中任意地方的JavaScript错误，打印错误日志，并且显示回退的用户界面。
Tip：错误边界只捕捉树中发生在它们之下组件里的错误。一个错误边界并不能捕捉它自己内部的错误。

11.render()
render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。
Tip：记住，不要在render里面修改state, 会形成递归栈溢出。