React学习-- React源码（3）生命周期的管理艺术

React的主要思想是通过构建可复用组件来构建用户界面。

组件：其实就是有限状态机，通过状态渲染对应的界面，且每个组件都有自己的生命周期，它规定了组件的状态和方法需要在那个阶段改变和执行。

例如：某个组件有显示和隐藏两个状态，在React中，只需要设置状态setState({ showed: true/false })就可以实现显示和隐藏的切换。

React生命周期基础

1、当首次挂载组件时，顺序执行：getDefaultProps，getInitialState，componentWillMount，render，componentDidMount 。

2、当卸载组件时，执行componentWillUnmount。

3、当重新挂在组件的时，按顺序执行：getInitialState，componentWillMount，render，componentDidMount。但是不执行getDefaultProps

4、当再次渲染组件时，组件接收到更新状态，此时按顺序执行：componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate。

如果开发者使用ES6 classes的方法构建React组件，那么defaultProps={}其实就是调用内部的getDefaultProps方法，this.state = {}其实就是调用getInitialState方法。

React生命周期进阶

自定义组件的生命周期主要通过三个阶段进行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它们负责通知组件当前所处的阶段，应该执行生命周期中的哪个步骤。这三个阶段对应三种方法：mountComponent、updateComponent、unmountComponent。在每个方法中，都提供了集中处理方法，其中前置will的在进入状态前调用，前缀did的在进入状态之后调用。

1、创建自定义组件

createClass时创建自定义组件的入口方法。该方法在整个生命周期中只会执行一次。这个方法负责管理生命周期中的getDefaultProps，因此这个方法也将只执行一次。

2、阶段一：MOUNTING

mountComponent负责管理生命周期中的方法：getInitialState、componentWillMount、render、componentDidMount。

通过mountComponent挂载组件，初始化序号、标记等参数，判断是否为无状态组件，并进行初始化工作，比如初始化props、context等参数。利用getInitialState获取初始化state、初始化更新队列和更新状态。

如果组件中存在componentWillMount，则执行。如果在componentWillMount中调用了setState方法，则会进行state合并，而不是re-render。并且，inst.state = this._processPendingState (inst.props, inst.context) 方法是在componentWillMount之后执行的，因此componentWillMount方法中的state并不是最新的。

渲染完成后，若存在componentDidMount则调用。

如果组件存在子组件，那么父组件的componentWillMount在子组件的componentWillMount之前调用；父组件的componentDidMount在子组件的componentDidMount之后调用（因为mountComponent是通过递归渲染内容的）。



3、阶段二：RECEIVE_PROPS

updateComponent负责管理生命周期中的：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。

若存在componentWillReceiveProps，则执行。如果此时在componentWillReceiveProps中调用setState，是不会触发re-render的，而是会进行state合并。并且，在componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate中也还是无法获取到更新后的 this.state，只有在render、componentDidUpdate中才能获取到更新后的this.state。

注意，禁止在shouldComponentUpdate和componentWillUpdate中调用setstate，这会造成循环调用，直至耗光浏览器内存后崩溃。



4、阶段三：UNMOUNTING

unmountComponent负责管理生命周期中的unmountComponent。

如果存在unmountComponent，则执行并重置所有相关参数，更新队列和状态，如果此时在unmountComponent中调用setState，是不会触发re-render的。

生命周期和状态让React组件非常灵活和强大，但是同时可能也会导致组件变的复杂而难以维护。

在实际的项目中，我们经常需要编写一些自身没有状态，只是从父组件接收props，并根据这些props进行渲染的简单组件。

在React中，一个很重要的原则就是让组件尽可能的都是无状态的。

无状态组件

无状态组件只是一个render方法，没有状态，没有生命周期，只是简单的接收props渲染生成DOM结构，是一个纯粹为了渲染而生的组件。相比于有状态组件，它们简单快捷高效，所以如果有可能的话，请尽量使用无状态组件。

例子：

const HelloWorld = (props) => <div>{props.name}</div>; ReactDOM.render(<HelloWorld name="Hello World!" />, App);