我正在学习 React 并试图更好地理解生命周期和不同阶段。
我刚刚读到的一件事是“React 首先渲染然后安装元素。在这种情况下渲染意味着调用类的 render(),而不是绘制 DOM”
我想我只是不太明白这意味着什么。有人可以用简单的方式或举例来解释它吗?
提前致谢!
首先一些简化的定义:
- 浏览器使用
dom
来决定显示什么。在反应中,这被称为painting,因为每当某物添加到 dom 后,浏览器必须重新绘制屏幕。
-
dom
操纵的代价是高昂的。无论是时间还是资源
- React 看起来如此快的原因之一是它使用了人们称之为
virtual dom
。虚拟 dom 尝试镜像实际 dom,它们可能会暂时不同步,因为对虚拟 dom 的所有更改都不会立即反映在实际 dom 上(否则拥有虚拟 dom 有什么好处?)
考虑到这些定义,让我们看看 React 做了什么:
- 当反应时会发生火灾
render
方法来填充它的虚拟DOM
- 它会保留batching虚拟 dom 的变化,一旦确定了合适的时机change屏幕上,它只会刷新changes到大教堂。这就是所谓的
painting
.
React 在底层使用了很多优化,我不知道所有这些优化(我也认为,我不需要知道它们做了什么),但这里有一些需要记住的事情:
- 只要你的
render
方法返回相同的内容,反应不会在屏幕上执行任何操作。
- 因此预计 React 可能会调用
render
方法多次,即使您别指望 it to.
- 因此,建议您的渲染方法不要有任何副作用或任何资源密集型操作,例如获取数据或转换数据结构。将其视为:
render
方法应该只具有与需要渲染的内容相关的逻辑,它可能需要执行的任何其他操作都可以在外部计算并放入状态或变量甚至被记忆。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)