react学习总结一

一、理解react组件

props + state => view

• react数据都是单向数据绑定
• react组件一般不提供方法，而是某种状态机
• react组件可以理解为一个纯函数

1、创建组件：单一职责原则，每个组件只做一件事，如果组件变得复杂，应拆分成多个小组件
2、数据状态管理：DRY原则，能计算得到的状态就不要单独做存储，组件尽量无状态，所需数据通过props获取

二、理解Virtual DOM

1、什么是 Virtual DOM
在React 中，每个 DOM 对象都有一个对应的 Virtual DOM 对象，它是 DOM 对象的 JavaScript 表现形式，其实就是使用 JavaScript 对象来描述 DOM 对象信息，比如 DOM 对象的类型是什么，它身上有哪些属性，它拥有哪些子元素

<div className="container">
  <h3>Hello React</h3>
  <p>React is great </p>
</div>

对应的Virtual DOM:

{
  type: "div",
  props: { className: "container" },
  children: [
    {
      type: "h3",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "Hello React"
          }
        }
      ]
    },
    {
      type: "p",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "React is great"
          }
        }
      ]
    }
  ]
}

vue 和 react 中都使用了虚拟DOM，因为渲染真实DOM的开销是很大的，性能代价昂贵，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，而我们只需要更新修改过的那一小块dom而不要更新整个dom，这时使用diff算法能够帮助我们。

总结：

• React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；
• React 通过分层求异的策略，对 tree diff 进行算法优化；
• React 通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对 component diff 进行算法优化；
• React 通过设置唯一 key的策略，对 element diff 进行算法优化；
• 建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；
• 建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。 借鉴： React探索-diff算法、React 源码深度解读（十）：Diff 算法详解