标签：lin ora mount 此刻 necessary end 工作 构建 结果
React 的主要思想是通过构建可复用组件来构建用户界面。所谓组件其实就是 有限状态机，通过状态渲染对应的界面，且每个组件都有自己的生命周期，它规定了组件的状态和方法需要在哪个阶段进行改变和执行。有限状态机（FSM），表示有限个状态以及在这些状态之间的转移和动作等行为的模型。一般通过状态、事件、转换和动作来描述有限状态机。React 通过管理状态来实现对组件的管理。
虽然组件、状态机、生命周期这三者都不是 React 独创，如果熟悉 Web Components 标准，它与其中的自定义组件的生命周期的概念相似。但就目前而言，React 是将这三种概念结合地相对清晰流畅的界面库。
React的生命周期包括三个阶段，分别是:mounting阶段, updating阶段,unmounting阶段。
一. MOUNTING
mountComponent 负责管理生命周期中的 getInitialState、componentWillMount、render 和 componentDidMount。
由于 getDefaultProps 是通过 Constructor 进行管理，因此也是整个生命周期中最先开始执行，而 mountComponent 只能望洋兴叹，无法调用到 getDefaultProps。这就解释了为何 getDefaultProps 只执行1次的原因。
由于通过 ReactCompositeComponentBase 返回的是一个虚拟节点，因此需要利用 instantiateReactComponent 去得到实例，再使用 mountComponent 拿到结果作为当前自定义元素的结果。
首先通过 mountComponent 装载组件，此时，将状态设置为 MOUNTING，利用 getInitialState 获取初始化 state，初始化更新队列。若存在 componentWillMount，则执行；如果此时在 componentWillMount 中调用 setState，是不会触发 reRender，而是进行 state 合并。到此时，已经完成 MOUNTING 的工作，更新状态为 NULL，同时 state 也将执行更新操作，此刻在 render 中可以获取更新后的 this.state 数据。
一. UPDATING阶段
updateComponent 负责管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。首先通过 updateComponent 更新组件，如果前后元素不一致说明需要进行组件更新，此时将状态设置为RECEIVING_PROPS。若存在 componentWillReceiveProps，则执行；如果此时在 componentWillReceiveProps 中调用 setState，是不会触发 reRender，而是进行 state 合并。到此时，已经完成 RECEIVING_PROPS 工作，更新状态为 NULL，同时 state 也将执行更新操作，此刻 this.state 可以获取到更新后的数据。
注意：此时 this.state 虽然获取到更新数据，但只能在内部源码中使用，我们在开发时，若在 componentWillReceiveProps 中调用 setState，那么在 componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中还是无法获取到更新后的 this.state，即此时访问的this.state 仍然是未更新的数据，只有在 render 和 componentDidUpdate 中才能获取到更新后的this.state。
调用 shouldComponentUpdate 判断是否需要进行组件更新，如果存在 componentWillUpdate，则执行。
updateComponent 本质上也是通过 递归渲染 内容的，由于递归的特性，父组件的 componentWillUpdate 一定在其子组件的 componentWillUpdate 之前调用，而父组件的 componentDidUpdate 肯定在其子组件 componentDidUpdate 之后调用。当渲染完成之后，若存在 componentDidUpdate，则触发，这就解释了 componentWillReceiveProps – componentWillUpdate – render – componentDidUpdate 它们之间的执行顺序。
三：UNMOUNTING
unmountComponent 负责管理生命周期中的 componentWillUnmount。
首先将状态设置为 UNMOUNTING，若存在 componentWillUnmount，则执行；如果此时在 componentWillUnmount 中调用 setState，是不会触发 reRender。更新状态为 NULL，完成组件卸载操作。
setState 更新机制
当调用 setState 时，会对 state 以及 _pendingState 更新队列进行合并操作，但其实真正更新 state 的幕后黑手是replaceState。replaceState 会先判断当前状态是否为 MOUNTING，如果不是即会调用 ReactUpdates.enqueueUpdate 执行更新。当状态不为 MOUNTING 或 RECEIVING_PROPS 时，performUpdateIfNecessary 会获取 _pendingElement、_pendingState、_pendingForceUpdate，并调用 updateComponent 进行组件更新。如果在 shouldComponentUpdate 或 componentWillUpdate 中调用 setState，此时的状态已经从 RECEIVING_PROPS -> NULL，则 performUpdateIfNecessary 就会调用 updateComponent 进行组件更新，但 updateComponent 又会调用 shouldComponentUpdate 和 componentWillUpdate，因此造成循环调用，使得浏览器内存占满后崩溃。
标签：lin ora mount 此刻 necessary end 工作 构建 结果
原文地址：http://www.cnblogs.com/mexinyan/p/7163276.html
