- 1、react遍历的key,和Vue中的key
key值具有唯一性,用于追踪列表元素中哪些被修改,被添加,移除的重要标志
- 2、setState发生了什么
diff渲染,首先合并这次操作的所有state,然后根据这个state去构建相对于的react元素新树,然后react会计算新树和旧树之间的对比,将有差异的重新渲染,没差异的略过,这样提高了渲染速度,做到了按需渲染。
- 3、遍历绑定事件机制
react中:JSX 上写的事件并没有绑定在对应的真实 DOM 上,而是通过事件代理的方式,将所有的事件都统一绑定在了 document 上。这样的方式不仅减少了内存消耗,还能在组件挂载销毁时统一订阅和移除事件。
react绑定的事件属于合成事件,Vue绑定的事件属于监听元素的原生事件
- 4、diff算法
diff算法:从上往下逐层进行比较,给每个节点生成标识符用在同级进行对比,:如果标识符相同,则继续比较此节点的下一级,如果子节点都相同则复用;如果子级有不同,则对此子节点进行判断,
节点中如果出现了新的标识符,则新增;如果旧节点的标识符在新中没有出现,则删除;如果标识符相同,内容不同,则进行替换。
- 5、虚拟dom和真实dom
react渲染时先将代码转换成一个JavaScript对象,再将JavaScript对象转换成真实dom。这个JavaScript对象就是所谓的虚拟dom
- 6、虚拟Dom比普通Dom更快?
如果是首次渲染, VitrualDom不具有任何优势,甚至它要进行更多的计算,消耗更多的内存。
VitrualDom的优势在于 React的 Diff算法和批处理策略, React在页面更新之前,提前计算好了如何进行更新和渲染 DOM。实际上,这个计算过程我们在直接操作DOM时,也是可以自己判断和实现的,但是一定会耗费非常多的精力和时间,而且往往我们自己做的是不如 React好的。所以,在这个过程中 React帮助我们"提升了性能"。
所以,我更倾向于说, VitrualDom帮助我们提高了开发效率,在重复渲染时它帮助我们计算如何更高效的更新,而不是它比 DOM操作更快。
- 7、为什么虚拟Dom比普通dom快?
因为直接操作全部的dom很慢,react中的虚拟dom的作用就是当setState时,生成虚拟dom,用虚拟dom和真实的dom进行比较(diff算法),相同则略过,不同则替换。这样,页面真实渲染只渲染了修改部分,不用渲染整个页面。提高了页面渲染性能。