React相关知识点

创建一个React组件

React中有一个React.Component类，这是一个抽象类，我们很少会直接用到它，通常我们写一个子类去继承它，并且在我们的类中至少定义一个render()方法。

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上面这个是ES6的写法，当然如果没有用ES6，那么可以向下面这样去写：

var Greeting = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

React 虚拟DOM

在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是JavaScript对象，我们称之为virtual DOM。具有 batching（批处理）和高效的Diff 算法。这让我们可以无需担心性能问题而随时刷新整个页面，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。

React diff算法

react的一大特点就是虚拟DOM的diff算法，下图为diff实现流程图。

现在我们就主要分析下react的diff算法，react的算法和传统算法有多不同，下面是我对传统算法的理解画的流程图：

其实传统算法就是对每个节点一一对比，循环遍历所有的子节点，然后判断子节点的更新状态，分别为remove、add、change。如果before的子节点仍有子节点依旧顺次执行。观察下复杂度,传统 diff 算法的复杂度为 O(n^3)，单纯从demo看，复杂度不到n3，但实际上，React 通过制定大胆的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。
其实算法直接降低这么多，肯定是有多牺牲的，或者说是是指定了特定的策略，定制化的实现了所需算法。react就是如此，他根据自己的特点，实现了部分代码的简化。

React diff 三策略：

1. Dom 节点跨层级移动操作次数少到忽略不计
2. 两个同类组件生成相似的树形结构，拥有不同类两个组件生成不同的树形结构
3. 同一层级的一组子节点通过唯一的id区分

基于策略二对Component diff 优化
同一类型组件，按照原策略进行比较virtual DOM树，非同一类型组件，标记为dirty component 替换整个组件的所有子节点

基于策略三对element diff 优化
同一层级，diff 的三种节点操作：
INSERT_MARKUP 插入：旧集合中没有该全新的组件的组件类型，需要对节点执行插入操作，同层级的同组子节点添加唯一key 值进行区分是否存在相同的节点。

MOVE_EXISTING 移动：旧集合中有新组件类型，element 是可更新类型，做移动操作。

REMOVE_NODE 删除：

1. 新集合没有旧组件类型，对应的element不同无法进行直接复用和更新，需要执行删除操作。

2. 旧组件不在新集合中，执行删除操作

   
   

React Patch

所谓Patch，简而言之就是将 tree diff 计算出来的DOM差异队列更新到真实的DOM节点上，最终让浏览器渲染出更新的数据。