React系列知识——几个概念点

props，state与render函数的关系

当组件的 state 或者 props 发生改变的时候，render函数就会重新执行。

当父组件的 render 函数被运行时，它的子组件的render函数都将被重新运行。

React中的虚拟DOM

方式一：

1.state 数据

2.JSX 模板

3.数据 + 模板 结合，生成真实的DOM，来显示

4.state 发生改变

5.数据 + 模板 结合，生成真实的DOM，替换掉原先的DOM

缺陷：

第一次生成了一个完整的DOM片段

第二次生成了一个完整的DOM片段

第二次的DOM替换第一次的DOM，非常耗性能

方式二：

1.state 数据

2.JSX 模板

3.数据 + 模板 结合，生成真实的DOM，来显示

4.state 发生改变

5.数据 + 模板 结合，生成真实的DOM，并不直接替换掉原先的DOM

6.新的DOM（DocumentFragment）和原先的DOm 做比对，找差异

7.找出input框发生了变化

8.只用新的DOM中的input元素，替换掉老的DOM中的input元素

缺陷：

性能提升并不明显，虽然没有直接替换掉旧的所有DOM，但是查找对比耗费了一定的性能

虚拟DOM

1.state 数据

2.JSX 模板

3.数据 + 模板 生成虚拟DOM（虚拟DOM就是一个JS对象，用它类描述真实的DOM）（耗费了性能）

虚拟DOM（[标签名，属性对象，该DOM节点的子节点/内容]）：['div', {id: 'abc'}, ['span', {}, 'hello world']]

4.用虚拟DOM的结构生成真实的DOM，来显示

真实的DOM:<div id="abc"><span>hello world</span></div>

5.state 发生变化

6.数据 + 模板 生成新的虚拟DOM（极大的提升了性能）

['div', {id: 'abc'}, ['span', {}, 'bye bye']]

7.比较原先虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升性能）

8.直接操作DOM，改变 span中的内容

以上即 React 数据视图更新的原理

render() {
    // JSX 里并不是真实的DOM
    // React 底层会通过 React.createElement将JSX转换成虚拟DOM（JS对象）
    // JSX -> createElement -> 虚拟DOM（JS对象）-> 真实的DOM
    return <div><span>item</span></div>
    // 相当于
    // return React.createElement('div', {}, React.createElement('span', {}, 'item'))
}

虚拟DOM的优点：

1.性能的提升，比较JS对象相对不耗费性能，比较真实DOM比较耗性能

2.使得跨端应用得以实现，如React Native，在原生应用，app端不存在DOM的概念，但是虚拟DOM使得React Native能够去实现原生应用，移动端APP。

虚拟DOM中的算法

当props或state中的数据发生改变时会重新render。

也即调用 setState 时，数据发生变化，虚拟DOM进行比对。

setState 是异步的，可提升 React 的底层性能，如短时间内连续多次调用 setState ，时间间隔非常短，那么React 就会将短时间内的多次调用进行合并去更新一次DOM，就会省去分别更新的耗费。

diff 算法是两个虚拟DOM比对使用的算法。其中一个很重要的概念是 同层比对 ，当发现一层虚拟DOM存在差异时将不再继续进行比对，将会使用新的DOM替换掉原先不同的DOM，虽然可能会存在DOM节点渲染的浪费，但好处在于同层的比对，算法比较简单，比对速度就会较快，大大减少了两个虚拟DOM之间比对的消耗。