1.虚拟DOM与真实DOM的区别
- 虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘
- 虚拟 DOM 的总损耗是”虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”，真实 DOM 的总损耗是”真实 DOM 完全增删改+排版与重绘
例子：
- 传统的原生 api 或 jQuery 去操作 DOM 时，浏览器会从构建 DOM 开始从头到尾执行一遍流程当你在一次操作时，需要更新 10 个 DOM 节点，浏览器没这么智能，收到第一个更新 DOM 请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程
- 而通过 VNode ，同样更新 10个 DOM 节点，虚拟 DOM 不会立即操作 DOM ，而是将这10 次更新的diff 内容保存到本地的一个 s 对象中，最终将这个 s 对象一次性 attach 到 DOM 树上，避免大量的无谓计算
区别
真实DOM优点：易用
缺点
- 效率低，解析速度慢，内存占用量过高
- 性能差: 频繁操作真实 DOM，易于导致重绘与回流
虚拟DOM优点
- 简单方便: 如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
- 性能方面: 使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
- 跨平台: React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行
缺点
- 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
- 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢
2. state 和 props 有什么区别？
相同点
- 两者都是 JavaScript 对象
- 两者都是用于保存信息
- props 和 state 都能触发渲染更新
不同点
- props 是外部传递给组件的，而 state 是在组件内被组件自己管理的一般在 constructor 中初始化
- props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
- state 是多变的、可以修改
3.react事件机制
React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等
在React中这套事件机制被称之为合成事件
合成事件（SyntheticEvent）
合成事件是 React模拟原生 DOM事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器
根据 W3C规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口
React事件机制总结如下：
- React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)
- React 自身实现了一套事件冒泡机制，所以这也就是为什么我们 event.stopPropagation()无效的原因。
- React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
- React 有一套自己的合成事件 SyntheticEvent
