React工作原理

• 基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。
• 尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。
• 这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

---

• React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
• HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
• React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。

---

• 组件的生命周期分成三个状态：

  Mounting：已插入真实 DOM
  Updating：正在被重新渲染
  Unmounting：已移出真实 DOM

• React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

  componentWillMount()
  componentDidMount()
  componentWillUpdate(object nextProps, object nextState)
  componentDidUpdate(object prevProps, object prevState)
  componentWillUnmount()

• 此外，React 还提供两种特殊状态的处理函数。

  componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用