构建现代 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 组件接收 props（属性），例如按钮的文本和单击时的事件处理程序。它返回一个虚拟 dom 节点，该节点表示
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!")}
app 组件返回一个 虚拟 dom 树，其中包含两个组件：header 和 button。header 组件返回一个代表
元素的 virtual dom 节点。
按钮组件的工作方式如我们之前所述。
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 => 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"])}
在这种情况下：
单击时按钮文本会发生变化。只有buttonwithstate组件重新渲染，真正的dom只更新按钮文本。
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 是一个强大的工具，有助于实现简单性和性能之间的平衡！
以上就是如何在虚拟 DOM 中渲染组件以及如何优化重新渲染的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491858.html
微信扫一扫 
支付宝扫一扫 
