Day 4 React Virtual DOM
The purpose of computing is insight,not numbers————Richard Hamming(哈明码创造者)
React builds and maintains
an internal representation
of the rendered
UI
. It includes the React elements you return from your components
.
React构建并维护“代表着已渲染的UI界面”的内部数据。这些内部数据包括了从组件返回的所有React元素。
This representation lets React avoid creating DOM nodes and accessing
existing ones beyond
necessity
, as that can be slower than operations on JavaScript objects.
有了代表着UI界面的内部数据,React就可以在多数情况下避免去创建和访问DOM节点了,除非是到了十分必要的时候。因为操作“DOM对象”比操作“Javascript对象”要慢一些。
Sometimes it is referred to as a “virtual
DOM”, but it works the same way on React Native.
这种内部数据有时候被称为“虚拟DOM节点”。但其实在React Native上它也以同样的方式工作着。
When a component’s
props
or state
change, React decides whether an actual DOM update is necessary by comparing the newly
returned element with the previously
rendered
one. When they are not equal, React will update the DOM.
当一个组件的属性或状态改变时,React会比较组件新返回的元素和已经被渲染出来的元素是否一致,并以此决定是否需要更新DOM节点。只有当新返回的元素和已经被渲染的元素不一致时,React才会进行DOM更新。
Even though
React only updates the changed DOM nodes, re-rendering still takes some time.
即便React只更新有改变的那些DOM节点,重新渲染依旧比较耗时。
In many cases
it’s not a problem, but if the slowdown
is noticeable
, you can speed all of this up by overriding the lifecycle function
shouldComponentUpdate, which is triggered
before the re-rendering process starts.
在大多数情况下,这不是一个问题。但如果你注意到程序慢下来了,就可以通过重写shouldComponentUpdate这个生命周期函数来进行加速。shouldComponentUpdate会在每次重新渲染前被执行。
本文选自:
https://reactjs.org/docs/optimizing-performance.html
生词 | 音标 | 释义 |
---|---|---|
maintain | [meɪnˈteɪn] | vt. 维护 |
internal representation | 内部表现,内部映射 | |
rendered | ['rendəd] | adj. 渲染过的 |
UI | 全称:User Interface,用户界面 | |
beyond | [bɪˈjɑ:nd] | prep. 超过 |
necessity | [nəˈsɛsɪti] | n. 必需品;必要性 |
component | [kəmˈpoʊnənt] | n. 组成;成分 |
access | [ək'sɛs] | n. 接近;进入 |
refer to | 参考;指的是 | |
virtual | [ˈvɜ:rtʃuəl] | adj. 虚拟的 |
prop | [prɑ:p] | n. 特征 |
state | [stet] | n. 状态 |
newly | [ˈnu:li] | adv. 新近 |
previously | [ˈprivɪəslɪ] | adv. 以前 |
even though | 哪怕;即使 | |
in many cases | 在多数情况下 | |
slowdown | [ˈsloʊdaʊn] | n. 减速 |
noticeable | [ˈnoʊtɪsəbl] | adj. 明显的 |
override | [oʊvərˈraɪd] | v. 覆盖,重写 |
lifecycle function | 生命周期函数 | |
trigger | [ˈtrɪɡɚ] | v. 触发 |