原文链接:https://blog.logrocket.com/exploring-usesyncexternalstore-react-hook/
原文作者:Abhinav Anshul 翻译:一川
您可能已经熟悉 React 提供的一组内置 Hook,例如 useState、useEffect、useMemo 等等。其中包括 useSyncExternalStore Hook,它在库作者中非常常用,但在客户端 React 项目中很少见到。
在本文中,将探讨 useSyncExternalStore Hook,以更好地了解它是什么、它如何工作、为什么有用以及何时应该在前端项目中利用它。
useSyncExternalStore 简介
如果您想订阅外部数据存储,useSyncExternalStore 可能是完美的 API。大多数时候,开发人员选择 useEffect Hook。但是,如果您的数据存在于 React 树之外,则 useSyncExternalStore 可能更合适。
基本的 useSyncExternalStore API 接受三个参数:
useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
- subscribe 是一个回调,它接收订阅外部存储数据的函数
- getSnapshot 是一个返回外部存储数据当前快照的函数
- getServerSnapshot 是一个可选参数,用于发送初始存储数据的快照。可以在服务器数据的初始水合作用期间使用它
useSyncExternalStore 返回订阅的外部数据的当前快照。
考虑这样一种情况,外部数据不在React 树中——换句话说,它存在于你的前端代码或一般应用程序之外。在这种情况下,可以使用 useSyncExternalStore 订阅该数据存储。
为了更好地理解 useSyncExternalStore Hook,让我们看一个非常简单的实现。可以将其分配给一个变量(例如下面示例中的 list ),并根据需要将其呈现给 UI:
import { useSyncExternalStore } from 'react';
import externalStore from './externalStore.js';
function Home() {
const list = useSyncExternalStore(externalStore.subscribe, externalStore.getSnapshot);
return (
<>
<section>
{list.map((itm, index) => (
<div key={index}>
<div>{itm?.title}</div>
</div>
))}
</section>
</>
);
}
如您所见, externalStore 现已订阅,将获得对 externalStore 数据执行的任何更改的实时快照。您可以使用 list 进一步映射外部源中的项目并进行实时 UI 渲染。
外部存储中的任何更改都会立即反映出来,React 将根据快照更改重新渲染 UI。
useSyncExternalStore 的用例
useSyncExternalStore Hook 是许多利基用例的理想解决方案,例如:
- 缓存来自外部 API 的数据:由于此 Hook 主要用于订阅外部第三方数据源,因此缓存数据也变得更简单。可以使应用程序的数据与外部数据源保持同步,以后还可以将其用于离线支持
- WebSocket 连接:由于 WebSocket 是一个“持续”连接,因此可以使用此 Hook 来实时管理 WebSocket 连接状态数据
- 管理浏览器存储:在这种情况下,需要在 Web 浏览器存储(例如 IndexedDB 或 localStorage )与应用程序状态之间同步数据,可以使用 useSyncExternalStore 订阅更新外部store
在很多这样的情况下,这个 Hook 可能比流行的 useEffect Hook 非常有用并且更容易管理。让我们在下一节中比较这两个 Hook。
useSyncExternalStore 与 useEffect
您可以选择更常用的 useEffect Hook 来实现与上面示例类似的功能:
const [list, setList] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
// assuming externalStore has a fetchData method or it is an async operation
const newList = await externalStore.fetchData();
setList(newList);
} catch (error) {
console.error(error);
}
};
// calling the async function here
fetchData();
}, []);
但是, useEffect Hook 不提供每次状态更新的当前快照,并且它比 useSyncExternalStore Hook 更容易出错。此外,它还存在臭名昭著的重新渲染问题。接下来我们简单回顾一下这个问题。
在处理 useEffect Hook 时,可能会遇到的一个主要问题是渲染顺序。浏览器完成绘制后,只有 useEffect Hook 会触发。这种延迟(尽管是故意的)会在管理正确的事件链方面带来意想不到的错误和挑战。
考虑以下示例:
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('count- ', count);
// Imagine some asynchronous task here, like fetching data from an API
// This could introduce a delay between the state update and the effect running
// afterwards.
}, [count]);
const increment = () => {
setCount(count + 1);
};
console.log('outside the effect count - ', count);
return (
<div>
<div>Counter</div>
<div>Count: {count}</div>
<button onClick={increment}>Increment</button>
</div>
);
}
export default Counter;
您可能期望计数器应用程序以简单的方式运行,其中状态更新,组件重新渲染,最后运行效果。然而,由于 API 调用的延迟,事情变得有点棘手,并且事件的顺序可能不是我们所期望的。
现在考虑一个具有许多此类副作用和不同依赖项数组的应用程序。在这种情况下,以正确的顺序跟踪状态更新将是一场噩梦。
如果您的数据位于外部并且不依赖于现有的 React API 来处理,那么您可以避免所有这些并使用 useSyncExternalStore Hook 来修复此性能差距。与 useEffect Hook 不同,此 Hook 会立即触发,不会造成任何延迟。
useSyncExternalStore 还可以防止前面提到的重新渲染问题,只要状态发生变化,您就可能会遇到 useEffect 问题。有趣的是,使用 useSyncExternalStore 订阅的状态不会重新渲染两次,从而解决了巨大的性能问题。
useSyncExternalStore 与 useState
使用 useSyncExternalStore Hook 时,您可能会觉得您只是订阅一个状态并将其分配给一个变量,类似于使用 useState Hook。然而, useSyncExternalStore 不仅仅是简单地分配状态。
useState Hook 的一个限制是它被设计为以“每个组件”的方式管理状态。换句话说,你定义的状态仅限于它自己的React组件,无法全局访问。您可以使用回调、全局强制状态,甚至可以在组件中使用 prop-drilling 状态,但这可能会减慢您的 React 应用程序的速度。
useSyncExternalStore Hook 通过设置一个全局状态来防止此问题,您可以从任何 React 组件订阅该状态,无论其嵌套有多深。更好的是,如果您正在处理非 React 代码库,您只需关心订阅事件。
useSyncExternalStore 将向您发送可以在任何 React 组件中使用的全局存储当前状态的正确快照。
使用 useSyncExternalStore 构建待办事项应用
让我们通过构建一个演示待办事项应用程序来看看 useSyncExternalStore Hook 在实际项目中有多有用。首先,创建一个用作外部全局状态的 store.js 文件。稍后我们将为我们的待办事项订阅此状态:
let todos = [];
let subscribers = new Set();
const store = {
getTodos() {
// getting all todos
return todos;
},
// subscribe and unsubscribe from the store using callback
subscribe(callback) {
subscribers.add(callback);
return () => subscribers.delete(callback);
},
// adding todo to the state
addTodo(text) {
todos = [
...todos,
{
id: new Date().getTime(),
text: text,
completed: false,
},
];
subscribers.forEach((callback) => {
callback();
});
},
// toggle for todo completion using id
toggleTodo(id) {
todos = todos.map((todo) => {
return todo.id === id ? { ...todo, completed: !todo.completed } : todo;
});
subscribers.forEach((callback) => callback());
},
};
// exporting the default store state
export default store;
您的 store 现在已准备好在 React 组件中订阅。继续创建一个简单的 Todo 组件,该组件将通过订阅您之前创建的商店将待办事项呈现到 UI:
import { useSyncExternalStore } from "react";
import store from "./store.js";
function Todo() {
// subscribing to the store
const todosStore = useSyncExternalStore(store.subscribe, store.getTodos);
return (
<div>
{todosStore.map((todo, index) => (
<div key={index}>
<input
type="checkbox"
value={todo.completed}
onClick={() => store.toggleTodo(todo.id)}
/>
// toggle based on completion logic
{todo.completed ? <div>{todo.text}</div> : todo.text}
</div>
))}
</div>
);
}
export default Todo;
至此,我们使用 useSyncExternalStore 的迷你演示项目就完成了。结果应如下所示:
图片
总结
React 提供了很多内置的 Hook,其中一些在开发人员中非常常用。然而,像 useSyncExternalStore 这样真正有用的 Hook 经常会被掩盖。
在这篇文章中,您已经了解了此 Hook 有许多出色的使用示例,它们不仅可以改善整体应用程序体验,还可以防止您在使用 useEffect Hook 时可能遇到的讨厌的错误。
如果您是 JavaScript 库作者,可能已经在使用它来获得使用 useEffect Hook 或 useState Hook 无法实现的性能提升。正如我们在本文中探讨的那样,如果正确使用,useSyncExternalStore Hook 可以为您节省大量的开发时间。