在熟练使用react中，听到最多的就是虚拟dom，diff算法等等，也是面试必问的一个题目，这个问题想要弄透彻，需要深入阅读源码，源码阅读还是有一定的难度的。对这个源码的理解我也是阅读很多别人的文章来辅助理解的，希望也能对看到的人有所帮助。
开发中常常遇到的问题：
1.为何必须引用React
2.自定义的React组件为何必须大写
3.React如何防止XSS
4.React的Diff算法
5.key在React中的作用
什么是虚拟dom？
在原生的JavaScript程序中，我们直接对DOM进行创建和更改，而DOM元素通过我们监听的事件和我们的应用程序进行通讯。
所谓的virtual dom，也就是虚拟节点。React会先将你的代码转换成一个JavaScript对象来模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点。这个JavaScript对象就是虚拟DOM。
比如下面一段 html代码：
<div class="title">
<span>Hello world</span>
<ul>
<li>hello</li>
<li>world</li>
</ul>
</div>
在 React可能存储为这样的 JS代码：
const VitrualDom = {
type: 'div',
props: { class: 'title' },
children: [
{
type: 'span',
children: 'Hello world'
},
{
type: 'ul',
children: [
{ type: 'ul', children: 'hello' },
{ type: 'ul', children: 'world' }
]
}
]
}
当我们需要创建或更新元素时，React首先会让这个VitrualDom对象进行创建和更改，然后再将VitrualDom对象渲染成真实DOM；
当我们需要对DOM进行事件监听时，首先对VitrualDom进行事件监听，VitrualDom会代理原生的DOM事件从而做出响应。
使用虚拟dom的好处是什么？
1.提升开发效率
使用JavaScript，我们在编写应用程序时的关注点在于如何更新DOM。
使用React，你只需要告诉React你想让视图处于什么状态，React则通过VitrualDom确保DOM与该状态相匹配。你不必自己去完成属性操作、事件处理、DOM更新，React会替你完成这一切。
这让我们更关注我们的业务逻辑而非DOM操作，这一点即可大大提升我们的开发效率。
2.性能提升
直接操作 DOM是非常耗费性能的，这一点毋庸置疑。VitrualDom的优势在于 React的 Diff算法和批处理策略， React在页面更新之前，提前计算好了如何进行更新和渲染 DOM。实际上，这个计算过程我们在直接操作 DOM时，也是可以自己判断和实现的，但是一定会耗费非常多的精力和时间，而且往往我们自己做的是不如 React好的。所以，在这个过程中 React帮助我们"提升了性能"。
React基于 VitrualDom自己实现了一套自己的事件机制，自己模拟了事件冒泡和捕获的过程，采用了事件代理，批量更新等方法，抹平了各个浏览器的事件兼容性问题。
虚拟DOM原理、特性
React组件的渲染流程：
1.使用 React.createElement或 JSX编写 React组件，实际上所有的 JSX代码最后都会转换成 React.createElement(...)， Babel帮助我们完成了这个转换的过程。因为我们的 JSX 代码会被 Babel 编译为React.createElement，不引入 React 的话就不能使用React.createElement了。
2.createElement函数对 key和 ref等特殊的 props进行处理，并获取 defaultProps对默认 props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个 ReactElement对象（所谓的虚拟 DOM）。
3.ReactDOM.render将生成好的虚拟 DOM渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实 DOM。
虚拟DOM的组成
即ReactElementelement对象，我们的组件最终会被渲染成下面的结构：
type：元素的类型，可以是原生html类型（字符串），或者自定义组件（函数或class）
key：组件的唯一标识，用于Diff算法，下面会详细介绍
ref：用于访问原生dom节点
props：传入组件的props，chidren是props中的一个属性，它存储了当前组件的孩子节点，可以是数组（多个孩子节点）或对象（只有一个孩子节点）
owner：当前正在构建的Component所属的Component
self：（非生产环境）指定当前位于哪个组件实例
_source：（非生产环境）指定调试代码来自的文件(fileName)和代码行数(lineNumber)
自定义的React组件为何必须大写
我们在 React 中都是写的 JSX语法，从 JSX语法 到页面上的 真实DOM大概需要经历以下几个阶段：JSX语法 —> 虚拟DOM（JS对象） —> 真实DOM。
因为浏览器是无法识别JSX语法的，因此我们需要通过 babel 对JSX语法进行转义，然后才能生成虚拟DOM对象，而原因就是在这里。babel在进行转义JSX语法时，是调用了 React.createElement() 这个方法，这个方法需要接收三个参数：type, config, children。第一个参数声明了这个元素的类型。
创建自定义组件时没有首字母大写，而 babel 在转义时把它当成了一个字符串 传递；把首字母大写，babel 在转义时传递了一个变量进去。
问题就在这里，如果传递的是一个字符串，那么在创建虚拟DOM对象时，React会认为这是一个简单的HTML标签，但是这显然不是一个简单的HTML标签，因此去创建一个不存在的标签肯定是会报错的。
如果首字母大写，那么就会当成一个变量传递进去，这个时候React会知道这是一个自定义组件，因此他就不会报错了。
防止XSS
ReactElement对象还有一个$$typeof属性，它是一个Symbol类型的变量Symbol.for('react.element')，当环境不支持Symbol时，$$typeof被赋值为0xeac7。
这个变量可以防止XSS。如果你的服务器有一个漏洞，允许用户存储任意JSON对象， 而客户端代码需要一个字符串，这可能为你的应用程序带来风险。JSON中不能存储Symbol类型的变量，而React渲染时会把没有$$typeof标识的组件过滤掉。
虚拟DOM事件机制
React自己实现了一套事件机制，其将所有绑定在虚拟 DOM上的事件映射到真正的 DOM事件，并将所有的事件都代理到 document上，自己模拟了事件冒泡和捕获的过程，并且进行统一的事件分发。
React自己构造了合成事件对象SyntheticEvent，这是一个跨浏览器原生事件包装器。 它具有与浏览器原生事件相同的接口，包括stopPropagation()和preventDefault()等等，在所有浏览器中他们工作方式都相同。这抹平了各个浏览器的事件兼容性问题。
React的diff算法
React将DOM抽象为虚拟DOM, 然后通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分重新渲染,提高渲染效率的过程; diff 是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染。是在render里面进行计算的。
（1）什么是调和？将Virtual DOM树转换成actual DOM树的最少操作的过程称为 调和 。
（2）什么是React diff算法？diff算法是调和的具体实现。
Dom diff算法解析
DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。diff算法用将O(n^3)复杂度转化为 O(n)复杂度。
tree diff
Tree DIFF是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁。如图所示，左边是旧属，右边是新属，第一层是R组件，一模一样，不会发生变化；第二层进入Component DIFF，同一类型组件继续比较下去，发现A组件没有，所以直接删掉A、B、C组件；继续第三层，重新创建A、B、C组件。
Component DIFF
如图所示，第一层遍历完，进行第二层遍历时，D和G组件是不同类型的组件，不同类型组件直接进行替换，将D删掉，再将G重建。
Element DIFF
Element DIFF紧接着以上统一类型组件继续比较下去，常见类型就是列表。同一个列表由旧变新有三种行为，插入、移动和删除，它的比较策略是对于每一个列表指定key，先将所有列表遍历一遍，确定要新增和删除的，再确定需要移动的。如图所示，第一步将D删掉，第二步增加E，再次执行时A和B只需要移动位置即可。
总结：
1.React是如何将O(n3) 复杂度的问题转换成 O(n) 的？
只进行同级比较
不同类的React组件会被当做完全不同的DOM结构而被完全替换
key prop：开发人员可以通过给Virtual DOM一个唯一的key属性暗示React这是同一个DOM结构，反之若key值不同则会被当做完全不同的DOM结构。
2.React通过分层求异的策略，对tree diff进行算法优化；
3.React通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对component diff进行算法优化。
4.React通过设置唯一key的策略，对element diff进行算法优化；
5.建议，在开发组件时，保持稳定的DOM结构会有助于性能的提升；
6.建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响React的渲染性能。
网友评论