react 生命周期的学习

写给自己看的一些东西

生命周期函数使用时必须使用已经定义好的名字，如componentWillMount()等，表示所编写的命令在这个阶段执行。如componentWillMount()，表示编写的命令在组件将要加载时执行。其函数的位置不重要，在哪儿都是会按照理应当的顺序执行。
但是在不同js脚本中的同一个函数加载顺序不同，index中componentWillMount()是最先加载的，componentDidMount()是最后加载的。也就是说，index.js是一个大框架，内部是各个组件，按照这个套用顺序进行处理。

React组件的生命周期分为三个过程：

1. 初始化过程(Mount)：第一次把组件渲染到DOM树的过程；
2. 运行过程(Update)：组件进行渲染更新的过程,包括状态改变和属性改变
3. 卸载过程(Unmount)：组件从DOM树中删除的过程。

初始化

是组件第一次绘制阶段，在这里完成了组件的加载和初始化；

• getDefaultProps：
  在组件创建之前，会先调用getDefaultProps()，初始化组件属性的默认值，只调用一次，严格地来说，这不是组件的生命周期的一部分。
• getInitialState:
  在组件被创建并加载后，首先调用getInitialState()，来初始化组件的状态。
• componentWillMount():
  准备加载组件，会调用componentWillMount()，其原型如下：

void componentWillMount()

这个函数调用是在组件创建，并初始化了状态之后，在第一次绘制render()之前。 可以在这里做一些业务初始化操作，也可以设置组件状态。 这个函数在整个生命周期中只被调用一次。因为componentWillMount是在render之前执行，所以在这个方法中setState不会发生重新渲染(re-render);
- 这是服务端渲染(server render)中唯一调用的钩子(hook);
- 通常情况下，推荐用constructor()方法代替;

• render()：
  渲染组件时，唯一的一定不能省略的函数，必须有返回值，返回null或false表示不渲染任何DOM元素。它是一个仅仅用于渲染的纯函数，返回值完全取决于this.state和this.props，不能在函数中修改props、state、拉取数据等具有副作用的操作。
• componentDidMount():
  在render完成后 组件完成更新渲染到页面时触发，会调用componentDidMount()，通知组件已经加载完成。函数原型如下：

void componentDidMount()

这个函数调用的时候，其虚拟 DOM 已经构建完成，可以在这个函数开始获取其中的元素或者子组件了。 需要注意的是，RN 框架是先调用子组件的componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时setTimeout或者setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。
- 这个方法会在组件装载(mounting)（插入树）后之后立即执行；
- 这里可以对DOM进行操作，这个函数之后ref变成实际的DOM
- 这里可以加载服务器数据，并且如果使用了redux之类的数据服务，
- 这里可以出发加载服务器数据的action;
- 这里可以使用setState()方法触发重新渲染(re-render);

运行过程：

属性改变：

• componentWillReceiveProps(nextProps):
  在已经挂在的组件(mounted component)接收到新props时触发;简单的说是从除了第一次生命周期(componentWillMount -> render -> componentDidMount)之后的生命周期出发,其原型如下:

void componentWillReceiveProps(	object nextProps)

输入参数nextProps是即将被设置的属性，旧的属性还是可以通过this.props来获取。在这个回调函数里面，你可以根据属性的变化(判断this.props和nextProps),通过调用this.setState()来更新你的组件状态，这里调用更新状态是安全的,并不会触发额外的render()调用。如下：

componentWillReceiveProps: function(nextProps) {
	this.setState({
		likesIncreasing: nextProps.likeCount > this.props.likeCount
	});
}

注意：
1、 React可能会在porps传入时即使没有发生改变的时候也发生重新渲染, 所以如果你想自己处理改变，请确保比较props当前值和下一次值;
2、如果你只是调用this.setState()而不是从外部传入props, 那么不会触发componentWillReceiveProps(nextProps)函数；这就意味着: this.setState()方法不会触发componentWillReceiveProps(), props的改变或者props没有改变才会触发这个方法;

状态改变：

• shouldComponentUpdate(nextProps, nextState)：
  接收到新props或state时，或者说在componentWillReceiveProps(nextProps)后触发
  函数原型如下：

boolean shouldComponentUpdate(object nextProps, object nextState)

输入参数nextProps和上面的componentWillReceiveProps函数一样，nextState表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果true表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。
默认情况下，这个函数永远返回true用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。
注意
1、这个方法在首次渲染时或者forceUpdate()时不会触发;
2、这个方法如果返回false, 那么props或state发生改变的时候会阻止子组件发生重新渲染;
3、目前，如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentWillUpdate(nextProps, nextState), render(), componentDidUpdate()都不会被触发;
4、未来，React可能把shouldComponentUpdate()当做一个小提示(hint)而不是一个指令(strict directive)，并且它返回false仍然可能触发组件重新渲染(re-render);

• componentWillUpdate(nextProps, nextState):
  如果组件状态或者属性改变，并且上面的shouldComponentUpdate(…)返回为true，就会开始准更新组件，并调用componentWillUpdate()，其函数原型如下：

void componentWillUpdate(object nextProps, object nextState)

输入参数与shouldComponentUpdate一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态。 这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了。
注意
1、千万不要在这个函数中调用this.setState()方法.;
2、如果确实需要响应props的改变，那么你可以在componentWillReceiveProps(nextProps)中做响应操作;
3、如果shouldComponentUpdate(nextProps, nextState) 返回false，那么componentWillUpdate()不会被触发;

• componentDidUpdate(prevProps, prevState):
  调用了render()更新完成界面之后，会调用componentDidUpdate()来得到通知，其函数原型如下：

void componentDidUpdate(object prevProps, object prevState)

因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了prevProps和prevState。
1、该方法不会再组件初始化时触发;
2、使用这个方法可以对组件中的DOM进行操作;
3、只要你比较了this.props和nextProps，你想要发出网络请求(nextwork requests)时就可以发出, 当然你也可以不发出网络请求;
注意：
如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentDidUpdate(prevProps, prevState)不会被触发;

卸载过程

• componentWillUnmount():
  当组件要被从界面上移除的时候，就会调用componentWillUnmount()，其函数原型如下：

void componentWillUnmount()

这个方法可以让你处理一些必要的清理操作，比如无效的timers、interval，或者取消网络请求， 或者清理任何在componentDidMount()中创建的DOM元素(elements);

总结

• 组件初始化
  原因 :组件第一次建立
  触发:componentWillMount -> render ->componentDidMount
• 组件更新 – props change
  原因:props发生改变
  触发componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate
• 组件更新 – state change
  原因:this.setState()使state发生改变
  触发:shoudlComponentUpdate -> componentWillUpdate ->componentDidUpdate
• 组件卸载或销毁
  原因:组件卸载或销毁
  触发:componentWillUnmount