【React 7/100 】 虚拟DOM和Diff算法

虚拟DOM和Diff算法

• React更新视图的思想是：只要state变化就重新渲染视图
• 特点：思路非常清晰
• 问题：组件中只有一个DOM元素需要更新时，也得把整个组件的内容重新渲染吗？ 不是这样的
• 理想状态：部分更新，只更新变化的地方
• React运用的核心点就是 虚拟DOM 配合 Diff 算法

虚拟DOM

本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容

虚拟DOM
const element = React.createElement(
  	type: 'h1',
  	props: {
    	className: 'greeting',
    	children: 'Hello JSX！'
  	},
)

HTML结构： 
<h1 className="greeting">Hello JSX!</h1>

Diff算法

执行过程

• 初次渲染时，React会根据初始化的state（model），创建一个虚拟DOM对象（树）
• 根据虚拟DOM生成真正的DOM，渲染到页面
• 当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树）
• 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容
• 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面

render()方法的调用并不意味着浏览器进行渲染

- 组件render()调用后，根据状态和JSX结构生成虚拟DOM对象( render()方法的调用并不意味着浏览器进行渲染，render方法调用时意味着Diff算法开始比对了)
- 示例中，只更新p元素的文本节点内容
- 初次渲染的DOM对象

小结

• 工作角度：应用第一，原理第二
• 原理有助于更好的理解React的自身运行机制
• setState() 异步更新数据
• 父组件更新导致子组件更新，纯组件提升性能
• 思路清晰简单为前提，虚拟DOM和Diff保效率（渲染变化的组件）
• 虚拟DOM -> state + JSX
• 虚拟DOM最大的特点是 脱离了浏览器的束缚，也就是意味着只要是能支持js的地方都可以用到react，所以为什么说react是可以进行跨平台的开发