react的理解和工作原理

react的理解

• 采用声明式渲染，函数式编程，声明显示内容，react自动完成
• 通过虚拟DOM，减少与DOM的交互
• 单向数据流，从父节点传递到子节点，父节点改变，子节点重新渲染，遵循不可变数据。
• 提高代码的复用率，通过react构建组件，让代码更容易得到复用
• react类组件使用render（）方法或函数式组件return，接受输入的数据并返回需要展示的内容
• 代码可读性高
• 可以做劫持渲染（shouldcomponentupdate）

react创建组件的三种写法

• React.createClass
• React.Component
• 无状态的函数写法（纯组件）

react的工作原理

react的响应式理念，通过改变函数的data值，改变ui。实现一个组件或者功能需要先实现一个函数，改变函数的data值，来影响ui

初始化的渲染流程。

• react用jsx语法写好逻辑。
• 执行 ReactDOM.render 函数，渲染出虚拟DOM。
• react 将虚拟DOM，渲染成真实的DOM。

页面更新的流程。

• 当页面需要更新时，通过声明式的方法，调用 setState 告诉 react什么数据变了。
• react 自动调用组件的 render 方法，渲染出虚拟 DOM。
• react 会通过 diffing 算法，对比当前虚拟 DOM 和需要更新的虚拟 DOM 有什么区别。然后重新渲染区别部分的真实 DOM

diffing 算法计算更新视图

• render（）调用后视图发生了变化，根据状态和jsx结构生成新的虚拟DOM，同级比较两棵虚拟DOM树的差异，得到差异对象，把差异对象应用到真正的DOM树上。

• diff策略
  1、tree diff
  按照树的层级进行比较，如果该节点不存在，则整个删除，不再继续比较。
  如果是跨层级的话，只有创建节点和删除节点的操作
  2、component diff
  每一层中组件的对比，同一类型的两个组件，按照层级比较虚拟DOM。组件A变化为组件B时，可能虚拟DOM没有任何变化，可以通过shouldComponentUpdata（）来判断是否需要判断计算；不同类型的组件，将一个（将被改变的）组件判断为dirtycomponent（脏组件），从而替换整个组件的所有节点
  3、element diff
  如果两个组件类型相同，则需要对比组建中的元素。删除，插入，移动节点

• 同一组件中key的要素
  1、通过key保证节点的唯一性，避免了重复渲染。如果key相同，则不需要重新计算并渲染。
  2、key值是固定的，一般key值不用数组的下表索引值，当数组发生变化是，索引值会改变。