React数据视图更新原理

本文章来自于俺学习React课程的笔记,大致分为8个阶段,React底层使用该方式避免操作DOM,节约性能。

React数据视图更新原理
  1. state数据
  2. JSX模板
  3. 数据+模板生成虚拟DOM (本质上虚拟DOM就是一个JS对象,用它来描述一个对象,虽然损耗了性能,但是js生成一个对象相对比直接操作DOM微乎其微)
  4. 用虚拟DOM的结构生成真正的HTML DOM,在页面上显示
  5. state如果发生变化
  6. 生成新的虚拟DOM
  7. 将原始的虚拟DOM和新的虚拟DOM进行比较(Diff算法,找到改变的差异,只修改改变的部分)极大的提升了性能
  8. 直接操作DOM,改变虚拟DOM中差异的HTML DOM部分。

俺对React底层的理解就是将DOM 操作的影响的性能,转移到js,借助于js 创建一个对象的低损耗,来提高系统整体的性能。

优点主要有以下:

  • 性能提升了
  • 它使得跨端应用得以实现。 React Native

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/5206.html

发表评论

登录后才能评论