`useSyncExternalStore` 和 `useState` 有什么区别?
时间: 2024-08-14 09:02:05 浏览: 70
`useSyncExternalStore` 是 React 中的一个高级 Hook,它允许你在组件之外存储状态并同步回组件内部。这通常用于那些不能直接修改 React 组件状态(如在浏览器的 localStorage 或 IndexedDB 中)的情况,但又需要保持与组件状态一致的场景。
相比之下,`useState` 是标准的 React Hooks,它用来管理组件内的本地状态。每当调用 `useState` 时,会返回一个新的状态变量和一个更新该状态的函数。状态变化会在当前渲染周期结束时生效。
简单来说:
1. **外部存储** - `useSyncExternalStore`:当你需要从非React环境(如浏览器缓存)同步状态时,比如存储用户的首选项,可以使用它来监听并应用这些更改到组件的状态中。
2. **组件内状态** - `useState`:主要用于处理常规的组件交互,比如表单输入、计数器等,状态的变化是在组件内部进行的。
示例:
```jsx
import { useSyncExternalStore } from "react-use";
// 假设我们有一个从 localStorage 获取的同步 store
const externalStore = useSyncExternalStore((key) => window.localStorage.getItem(key));
// 使用 useState 更新组件内部状态
const [internalState, setInternalState] = useState();
function updateBoth() {
// 同步外部 store 到内部 state
setInternalState(externalStore.value);
// 写入新的外部 store 值
externalStore.set('newValue');
}
<...>
<button onClick={updateBoth}>Update Both</button>
```