react 中 diff 算法主要遵循三个层级的策略：

• tree 层级
• conponent 层级
• element 层级

tree 层级

DOM 节点跨层级的操作不做优化，只会对相同层级的节点进行比较 只有删除和创建操作

conponent 层级

如果是同一个类的组件，则会继续往下 diff 运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的

element 层级

对于比较同一层级的节点们，每个节点在对应的层级用唯一的 key 作为标识

提供了 3 种节点操作，分别为  INSERT_MARKUP (插入)、 MOVE_EXISTING  (移动) 和  REMOVE_NODE  (删除)

---

jsx 转 dom

在 react 源码中，虚拟 Dom 转化成真实 Dom 整体流程如下图所示：


• 使用 React.createElement 或 JSX 编写 React 组件，实际上所有的 JSX 代码最后都会转换成 React.createElement (...) ，Babel 帮助我们完成了这个转换的过程。
• createElement 函数对 key 和 ref 等特殊的 props 进行处理，并获取 defaultProps 对默认 props 进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟 DOM 对象
• ReactDOM.render 将生成好的虚拟 DOM 渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实 DOM

---

react 优化

• 避免使用内联函数

• 使用 React Fragments 避免额外标记

• 使用 Immutable

• 懒加载组件

• 事件绑定方式

• 服务端渲染