如何在虚拟 DOM 中渲染组件以及如何优化重新渲染

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签组件

构建现代 web 应用程序时，高效更新 ui（用户界面）对于保持应用程序快速响应至关重要。许多框架（如 react）中使用的常见策略是使用 虚拟 dom 和组件。本文将解释如何使用 virtual dom 渲染组件，以及如何优化重新渲染以使 web 应用程序不会变慢。

1.什么是虚拟dom？

dom（文档对象模型）是一种树状结构，表示网页上的所有元素。每次与网页交互（单击按钮、输入文本）时，浏览器都必须更新 dom，这可能会很慢。

虚拟 dom 就像真实 dom 的副本，但仅存在于内存中。每次发生变化时，我们不会直接更新真实 dom，而是先更新虚拟 dom。一旦进行更改，虚拟 dom 就会将自身与旧版本进行比较，找到差异（这称为 diffing），并仅更新真实 dom 中需要更改的部分。

2.什么是组件？

在现代 web 应用程序中，组件是 ui 的构建块。将它们视为网页中可重复使用的小部分。例如：

每个组件都描述了 ui 的哪一部分应该是什么样子。 组件函数返回代表该ui的虚拟dom树。

3. 示例：创建按钮组件

让我们使用伪代码创建一个简单的 button 组件。该组件将返回一个带有文本的按钮以及单击该按钮时运行的函数。

// component to display a buttonfunction button(props) {    // the button component returns a virtual dom node for a <button> element    return new virtualnode("button", { onclick: props.onclick }, [props.text])}</button>

在此示例中：

4. 渲染多个组件

假设我们要构建一个具有标题和按钮的应用程序。这些部分中的每一个都可以表示为组件。该应用程序的结构可能如下所示：

// app component with a header and buttonfunction app() {    return new virtualnode("div", {}, [        new header(), // the header component        new button({ text: "click me", onclick: handleclick }) // the button component    ])}// header componentfunction header() {    return new virtualnode("h1", {}, ["welcome to the app!"])}// function to handle button clicksfunction handleclick() {    console.log("button clicked!")}

5. 初始渲染如何工作

当应用程序第一次运行时，它：

调用组件：执行app()、header() 和button()。
创建虚拟 dom：结果是代表 ui 的虚拟 dom 节点树。
更新真实 dom：虚拟 dom 用于在真实 dom 中构建实际的 html 元素。

// initial render of the appfunction renderapp() {    let virtualdom = app()          // render the app's virtual dom    let realdom = createrealdom(virtualdom)  // convert the virtual dom into real dom elements    attachtopage(realdom)           // attach the real dom elements to the webpage}

6. 重新渲染以及为什么我们需要优化

假设应用程序中的某些内容发生了变化，例如按钮文本。通常，整个应用程序将被重新渲染，但如果应用程序很大，这可能会很慢。相反，我们可以通过仅更新已更改的部分来优化重新渲染。

以下是重新渲染时发生的情况：

比较：我们将旧的 virtual dom 与新的进行比较，找出发生了什么变化。
修补：仅更改真实 dom 中需要更新的部分（此过程称为修补）。

示例：更改按钮文本

假设按钮文本从“click me”更改为“clicked!”。以下是我们重新渲染按钮的方法：

// new button component with updated textfunction button(props) {    return new virtualnode("button", { onclick: props.onclick }, [props.text])}// re-rendering with the new textlet oldbutton = button({ text: "click me", onclick: handleclick })let newbutton = button({ text: "clicked!", onclick: handleclick })// diff the old and new buttonlet diffresult = diff(oldbutton, newbutton)// patch the real dom with the changespatch(realbuttondom, diffresult)

7. 优化重新渲染：是否应该更新组件

优化重新渲染的关键方法之一是检查组件是否确实需要更新。如果组件的 props 或 state 没有任何变化，我们可以跳过重新渲染该组件。这就是 shouldcomponentupdate 逻辑发挥作用的地方。

// function to check if a component should updatefunction shouldcomponentupdate(oldprops, newprops) {    return oldprops !== newprops // only update if the props have changed}

现在，在重新渲染之前，我们检查组件是否应该更新：

// example: optimized re-rendering of button componentfunction renderbuttonifneeded(oldbutton, newbutton) {    if (shouldcomponentupdate(oldbutton.props, newbutton.props)) {        let realbutton = createrealdom(newbutton)        patch(realbutton)    }}

8. 使用键进行列表优化

渲染项目列表（例如按钮列表）时，我们可以通过使用 keys 来唯一标识每个项目进行优化。这有助于比较算法匹配列表中的新旧项目，并仅应用必要的更改。

// list of buttons with unique keysfunction buttonlist(items) {    return new virtualnode("div", {}, items.map(item =&gt;         new button({ key: item.id, text: item.text, onclick: handleclick })    ))}

使用键，如果列表中的一项发生变化（例如添加或删除按钮），算法可以快速识别哪个按钮发生了变化并仅更新该按钮。

9. 优化状态变化

组件也可以有自己的状态。当组件的状态发生变化时，我们只想重新渲染该特定组件，而不是整个应用程序。这是带有状态的按钮的示例：

// button component with statefunction buttonwithstate() {    let [clicked, setclicked] = usestate(false) // create state for button    function handleclick() {        setclicked(true) // update state when clicked    }    return new virtualnode("button", { onclick: handleclick }, [clicked ? "clicked!" : "click me"])}

在这种情况下：

10.避免重新渲染父组件

另一个优化是当只有子组件发生变化时避免重新渲染父组件。例如，如果按钮发生变化但 header 保持不变，我们可以跳过重新渲染 header。

// Optimized App componentfunction App() {    if (!shouldComponentUpdate(oldHeaderProps, newHeaderProps)) {        return oldHeader // Reuse the old Header if it hasn't changed    }    return new VirtualNode("div", {}, [        new Header(), // Re-render the Header only if necessary        new ButtonWithState() // Button re-renders based on state    ])}

11. 结论：使用虚拟 dom 进行高效的 ui 更新

总而言之，我们可以将使用 virtual dom 渲染和优化组件的过程分解为以下步骤：

初始渲染：第一次渲染应用程序时，我们构建虚拟 dom 树并将其转换为真实 dom。
重新渲染：当某些内容发生变化时（例如按钮文本或状态），我们会更新虚拟 dom 并仅将必要的更改应用于真实 dom。
优化重新渲染：通过使用 shouldcomponentupdate、列表键和基于状态的更新等策略，我们可以避免不必要的重新渲染，从而保持应用程序的快速响应。

通过仔细考虑何时重新渲染以及重新渲染什么内容，我们可以确保 web 应用程序即使在复杂性增加的情况下仍然保持高效。 virtual dom 是一个强大的工具，有助于实现简单性和性能之间的平衡！

文章推荐