React(二)

Prop,State和render函数的关系

• 当组件的state或者props发生变化的时候，render函数就会重新被执行
• 当父组件的render函数运行时，它的自组件的render都将被重新运行一次

---

虚拟DOM

前言：假如没有React，数据渲染页面如何实现呢？

方案一

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）

1. state数据
2. JSX 模板
3. 生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM）(损耗了性能)

['div', {id: 'abc}, ['span', {}, 'hello world']]

4. 数据 + 模板 结合，生成真实的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中的内容

深入了解虚拟DOM

虚拟DOM带来的好处

• 性能提升
• 实现跨端应用。React Native