React 函数组件更新过程

您所在的位置：网站首页 › 你知道dom和sub吗 › React 函数组件更新过程

React 函数组件更新过程

2023-06-04 17:39| 来源: 网络整理| 查看: 265

前言

最近也是在重新学习 React Hook。发现在工作中好多东西你虽然用了也出现效果了，但是这个过程中都干了些什么却都不知道。这就会导致你在写项目的时候会出现一些奇怪的 bug 而找不到原因。文章主要都是自己在学习过程中的一个笔记。希望能够帮助也在学习中的你。

React 的更新机制

React 使用 Virtual DOM（虚拟 DOM）和 Diff 算法来实现高效的 UI 更新机制。

Virtual DOM 是一种轻量级的、虚拟的 DOM 表示，它是由 React 自己实现的，而不是浏览器提供的。React 通过比较新旧 Virtual DOM 树的差异，来确定需要更新的部分，从而避免了直接操作浏览器 DOM 带来的性能问题。

在更新过程中，React 首先将新的 props 和 state 与旧的 props 和 state 进行比较，如果它们发生了变化，React 会触发组件的重新渲染。在重新渲染组件之后，React 会生成一个新的 Virtual DOM 树，并将其与旧的 Virtual DOM 树进行比较，以确定需要进行哪些 DOM 操作来更新实际的 DOM 树。

React 使用 Diff 算法来比较新旧 Virtual DOM 树之间的差异，并确定哪些部分需要进行更新。Diff 算法是一种高效的算法，它可以快速地找到 Virtual DOM 树之间的差异，并最小化 DOM 操作的数量，从而提高性能。

总之，React 使用 Virtual DOM 和 Diff 算法来实现高效的 UI 更新机制，这使得 React 能够在 Web 应用程序中提供快速、动态的用户界面。

额…说白话就是：每次修改后会将新的东西和旧的东西进行比较，哪个地方有差异就更新哪里。每一次 set 都发生了啥

在 React 函数组件中我们想要更新视图就必须使用 useState 返回的 set 方法才能使视图更新。

import { useState } from "react"; function App() { const [state, setState] = useState(0); return ( state：{state} useState } from "react"; function App() { const [state, setState] = useState(0); return ( state:{state} /* setState(0)}>cont+1 */} ); }

如果你是这样写那么 React 是不会更新的，因为更新的值还是原来的值

引用数据类型（地址对比）如果是引用数据类型（如对象、数组）或者是更深层次的嵌套对象时，那么 React 就会对比他们的地址，如果地址变动了那么就会更新视图。如果你值不变但是地址变了，它也会更新。 import { useState } from "react"; function App() { const [list, setList] = useState([1, 2, 3, 5]); const modifyList = () => { // 1. 单独修改某一项（不会更新） list[0] = 99; setList(list); // 2. slice方法返回一个新数组（更新） setList(list.slice()); setList([1, 2, 3, 5]); // 3. splice 改变原数组（不会更新） list.splice(1, 1); setList(list); // 4. splice 返回删除的数组（更新） setList(list.splice(1, 1)); // ... }; return ( {list.map((item) => ( {item} ))}

【本文地址】

React 函数组件更新过程

React 函数组件更新过程

今日新闻

推荐新闻