1. 数据 state
2. JSX模板
3. 数据+模板 结合生成真实的DOM来显示
4. State 变化
5.数据+模板 结合生成真实的DOM, 替换原来的DOM
缺陷:
第一次生成了完整的DOM, 第二次生成了完整的DOM, 第二次替换第一次, 非常消耗性能
1. 数据 state
2. JSX模板
3. 数据+模板 结合生成真实的DOM来显示
4. State 变化
5.数据+模板 结合生成真实的DOM,并不直接 替换原来的DOM
6. 两次DOM 做对比 找出差异
7. 比如某个元素input变化了
8. 只用新的DOM中的input , 替换掉老的DOM中的Input 元素
缺陷:
性能提升不明显
1. 数据 state
2. JSX模板
3. 数据+模板 结合生成虚拟的DOM(损耗性能小)
<div><span>hello</span></div>
4. 用虚拟DOM生成真实DOM(虚拟DOM是一个JS的对象,用来描述真实的DOM
5. State 发现变化
6. 数据加模板 生成新的虚拟dom(极大的提高了性能)
7. 比较原始虚拟DOM 和新的DOM 区别(极大的提高了性能, 比较JS对象不消耗性能)
8. 直接操作DOM,更新
JSX >> React.createElement > 虚拟DOM(JS 对象) >> 真实DOM
优点:
- 性能提升了
- 跨端应用得以实现 ex:react native
setState 是异步的, 是为了提高react 底层的性能
Diff 算法:
同层比对
虚拟DOM的比对会根据Key 进行关联, 极大的提高的性能,所以key最好不变 不要是index
原文地址:https://www.cnblogs.com/padingdun/p/12317786.html
时间: 2024-11-01 18:09:18