如何理解react响应式

如何理解react响应式

React中响应式原理

1、开发者只需关注状态转移(数据),当状态发生变化,React框架会自动根据新的状态重新构建UI。

2、React框架在接收到用户状态改变通知后,会根据当前渲染树,结合最新的状态改变,通过Diff算法,计算出树中变化的部分,然后只更新变化的部分(DOM操作),从而避免整棵树重构,提高性能。

状态变化后React框架并不会立即去计算并渲染DOM树的变化部分,相反,React会在DOM的基础上建立一个抽象层,即虚拟DOM树,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到真实DOM中,而不是每次改变都去操作一下DOM。

为什么不能每次改变都直接去操作DOM树?这是因为在浏览器中每一次DOM操作都有可能引起浏览器的重绘或回流:

* 如果DOM只是外观风格发生变化,如颜色变化,会导致浏览器重绘界面。

* 如果DOM树的结构发生变化,如尺寸、布局、节点隐藏等导致,浏览器就需要回流(及重新排版布局)。

而浏览器的重绘和回流都是比较昂贵的操作,如果每一次改变都直接对DOM进行操作,这会带来性能问题,而批量操作只会触发一次DOM更新。

本文来自React答疑栏目,欢迎学习!

以上就是如何理解react响应式的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读