玖叶教程网

前端编程开发入门

react高频面试题(react高频面试题分析)

  • 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算法),相同则略过,不同则替换。这样,页面真实渲染只渲染了修改部分,不用渲染整个页面。提高了页面渲染性能。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言