React简介
React 起源于 Facebook 的内部项目,帮助你构建页面UI的库。React组件相当于MVC中的View,只提供UI层面的解决方案。
React中的核心概念
- 虚拟DOM(Virtual DOM)
- Diff算法
虚拟DOM
React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率
VituralDOM的处理方式
- 用 JavaScript 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中
- 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
- 把记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了
Diff算法
- 当你使用React的时候,在某个时间点 render() 函数创建了一棵React元素树,
- 在下一个state或者props更新的时候,render() 函数将创建一棵新的React元素树,
React将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方)