useSyncExternalStore 解析

useSyncExternalStore 是 React Hooks 中的一个自定义 Hook，用于将外部状态（例如浏览器 localStorage 或服务端数据）同步到组件中。

它需要接收三个参数：

• getState: 一个函数，用于获取外部状态。
• setState: 一个函数，用于将外部状态同步到组件中。
• isEqual: 一个可选的函数，用于比较两个值是否相等，默认使用严格相等（===）。

当组件渲染时，useSyncExternalStore 会通过 useEffect 监听外部状态的变化，并在必要时调用 setState 更新组件内部状态。同时，useSyncExternalStore 还会在组件卸载时清除监听器，以避免内存泄漏。

以下是一个示例：

import { useState } from "react";
import { useSyncExternalStore } from "./useSyncExternalStore";

function MyComponent() {
  const [count, setCount] = useState(0);

  useSyncExternalStore(
    () => localStorage.getItem("count"),
    (value) => setCount(parseInt(value)),
    (a, b) => parseInt(a) === parseInt(b)
  );

  const handleClick = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

在这个示例中，当 MyComponent 渲染时，会创建一个 count 状态和一个 useSyncExternalStore 调用。useSyncExternalStore 中定义了一个监听 localStorage 中名为 count 的值的变化，并在变化时更新组件内部状态。同时，useSyncExternalStore 还通过自定义的相等比较函数来判断两个值是否相等。当点击 “Increment” 按钮时，会更新 count 状态，并将新值同步到 localStorage 中。

需要注意的是，在使用 useSyncExternalStore 时，需要确保外部状态可以被正确读取和写入。否则可能会导致数据不一致或其他异常情况。