Awaited 在类型层面模拟 await 的效果——把一个“可能是 Promise 的类型”解包成“await 之后得到的值的类型”。它还能递归解包嵌套 Promise 1) 基本用法：解包 Promise type A = Awaited>; // number type B = Awaited; // number（不是 Promise 就原样返回） 2) 递归解包：嵌套 Promise type C = Aw...

为了解决dom的频繁reflow问题，对账 是一种对虚拟Dom的启发式比较算法，旨在对原始虚拟dom和更新后的虚拟dom进行比较，查找需要真正进行更新的节点和属性，解决dom的复用和操作问题，从而实现高效的重渲染更新。 React 的启发式算法在浏览器/HTML 已经给出的结构约束和性能边界之内，人为设计了一套工程上可接受的近似算法；它既利用了 HTML 的层级、顺序、key 等现成信息，也主动放弃了跨层移动、最少操作等理论上更优但复杂度高的方案。（复杂度仅为O（n））。 启发式假设： 两个不同类型的元素产生不同的树(基于树的对比)。 不同类型的节点会被算...

Virtual Dom 是一个由 JavaScript 对象构成的树结构，用 JS 对象描述真实 DOM 结构。React 将每个 DOM 元素（如 `、`）或 react组件 抽象成一个 JS 对象（称为 VNode），包含标类型（type）、属性（props）、子节点（children）等信息，当组件状态（state/props）变化时，React 会先生成一棵新的虚拟 DOM 树，然后通过Diff 算法（Reconciliation）对比新旧虚拟 DOM 的差异，最后仅更新有变化的部分到真实 DOM。 为什么要用虚拟Dom(虚拟Dom优势) 手动操...

避免重复创建初始状态 React 只在初次渲染时保存初始状态，后续渲染时将其忽略。 function TodoList() { const [todos, setTodos] = useState(createInitialTodos()); // ... 尽管 createInitialTodos() 的结果仅用于初始渲染，但你仍然在每次渲染时调用此函数。如果它创建大数组或执行昂贵的计算，这可能会浪费资源。 为了解决这个问题，你可以将它 作为初始化函数传递给 useState： functi...

useOptimistic 允许在进行异步操作时显示一个临时state。它接受一个state输入，并通过一个 updateFn 来更新临时的state，此更新通常被成为乐观更新，待异步操作完成时触发set原state，原state 更新触发重渲染，React 会用新 state 重新执行 useOptimistic，此时乐观值被丢弃，UI 回到真实值。 使用场景 useOptimistic 用于“用户触发了一个会走异步/服务端的动作，但我希望 UI 立刻给出成功后的预期状态”，也就是先乐观展示、失败再回滚/提示，从而让交互更顺滑。 它适合“高成功率、可回滚”的操作；如果失败代价很...

useEffectEvent 允许创建一个函数，这个函数专门用于在effect中调用，函数中引用的props/state不受effect回调函数闭包影响，永远能拿到最新的props/state值。在某些情况下，你可能只想在 Effect 中读取最新的 props 或 state，而不希望当这些值改变时让 Effect 重新运行。要在 Effect 中读取最新的 props 或 state，而不让这些值成为响应式依赖，请把它们放进一个 Effect Event 中。 解决闭包陷阱 闭包陷阱代码 export default function C...

传入一个回调函数，此函数为执行React系统之外的一些副作用，提供一个依赖列表， 当依赖列表发生变化时，执行清理函数（即return）并重新执行匿名函数 副作用 ajax 请求 计时器 其他异步操作 更改真实 DOM 对象 本地存储 其他会对外部产生影响的操作 机制 副作用函数中，如果使用了函数上下文中的变量，则由于闭包的影响，会导致副作用函数中变量不会实时变化。 回调函数 总是在 浏览器把 DOM 更新完毕以后 进行异步执行；清理函数则在 组件即将卸载或重渲染之前 执行。 如果可以在渲染期间计算某些内容，则不需要使用 Ef...

https://zh-hans.react.dev/reference/react/useDeferredValue useDeferredValue 拥有“延迟显示”能力：当传入state的新值发生变化但还未准备好时，它先返回旧值完成本次渲染，再在后台低优先级地渲染新值；只要后台渲染完成，新值就会自动提交到屏幕。具体来说，当 useDeferredValue 接收到与之前不同的值时，除了当前渲染使用旧值，它还会安排一个后台重新渲染。这个后台重新渲染是可以被中断的，如果 state 有新的更新，React 会从头开始重新启动后台渲染。举个例子，如果用户在输入框中的输入速度比接收延迟值...

与字面量对象 {} 总是会创建新对象类似，在 JavaScript 中，function () {} 或者 () => {} 总是会生成不同的函数，这意味着react中的函数默认总会在重渲染中改变对象。useCallback(callback,deps) 可以通过指定一个deps依赖数组，当deps中的依赖未改变时，跳过 useCallback中回调函数的重渲染。 使用时机 记忆化组件。虽然memo()可以在props不变时记忆化组件，但props中可能也会传递function，这时就可以通过callback先记忆化此function。memo()和usecallba...

jsx是（Blob/Typescript） 翻译成对 React.createElement() 的语法糖 隐身 children 展开原则 在 React 中，写在组件标签体（开闭标签之间）的所有节点会被编译器自动塞进一个名为 children 的 prop； 当组件内部使用 {...props}（或 {...rest}）把剩余属性全部展开到原生 DOM 元素时，children 也随之被传递并渲染，因此无需显式书写 {children}。 export function ItemTest({...props}){ return ( <...