2021-03-19

React学习笔记

Props，State与render函数

1. 当组件的props或者state发生改变时，render函数就要重新执行
2. 当父组件的render函数被运行时，子组件的render函数也会被执行一次

---

什么是虚拟DOM（本质是JS对象）

假设实现react

1. 首先要定义数据 state
2. 再有JSX 模板
3. 在render函数里边 数据与模板结合，生成真实的DOM，来显示
4. 当数据 state发生改变，render函数再次执行
5. 数据和模板再次结合，生成真实的DOM，然后替换原始DOM（数据更新，页面更新）

缺陷：

1. 第一次生成以个完整的DOM片段
2. 第二次生成一个完整的DOM片段
3. 第二次生成的DOM替换第一次的DOM，非常耗性能

改进：

1. 首先要定义数据 state
2. 再有JSX 模板
3. 在render函数里边 数据与模板结合，生成真实的DOM，来显示
4. 当数据 state发生改变，render函数再次执行
5. 数据+模板 结合，生成真实的DOM，并不直接替换原始的DOM
6. 新的DOM（DocumentFragment）和原始的DOM做比对，找差异（损耗了性能）
7. 找出发生了改变的元素
8. 只用新的DOM中的已改变的元素替换掉原始DOM中的元素

缺陷：
性能的提升并不明显

再次改进：

1. state 数据
2. JSX 模板
3. 数据 + 模板 结合，生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM）
   虚拟DOM（损耗了性能（极小））生成虚拟DOM，来显示
   真实DOM：

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

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

<div id='abc'><span>hello world</span></div>

5. state发生变化
6. 数据 + 模板 生成新的虚拟DOM（极大的提高了性能）（实际是新生成了一个JS对象）

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

7. 比较原始虚拟DOM和新的虚拟DOM的差异，找到区别是span中的内容（极大的提升了性能）
8. 直接操作DOM，改变span中的内容

减少了真实DOM的生成与真实DOM之间的比较，取而代之的是JS对象的生成与JS对象之间的比较。

---

深入了解虚拟DOM

JSX -> createElement -> 虚拟DOM(JS对象) -> 真实的DOM

虚拟DOM的优点：

1. 性能提升了
2. 使得跨端应用得以实现，能用React写原生应用（既能开发网页应用，也能开发原生应用）