探索 useSyncExternalStore,一个鲜为人知的 React Hook

2024年 3月 19日 77.9k 0

原文链接: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 (
    
      
        {list.map((itm, index) => (
          
            {itm?.title}
          
        ))}
      
    
  );
}

如您所见, 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 (
    
      Counter
      Count: {count}
      Increment
    
  );
}

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 (
    
      {todosStore.map((todo, index) => (
        
            store.toggleTodo(todo.id)}
            />
            // toggle based on completion logic 
            {todo.completed ? {todo.text} : todo.text}
        
      ))}
    
  );
}

export default Todo;

至此,我们使用 useSyncExternalStore 的迷你演示项目就完成了。结果应如下所示:

图片图片

总结

React 提供了很多内置的 Hook,其中一些在开发人员中非常常用。然而,像 useSyncExternalStore 这样真正有用的 Hook 经常会被掩盖。

在这篇文章中,您已经了解了此 Hook 有许多出色的使用示例,它们不仅可以改善整体应用程序体验,还可以防止您在使用 useEffect Hook 时可能遇到的讨厌的错误。

如果您是 JavaScript 库作者,可能已经在使用它来获得使用 useEffect Hook 或 useState Hook 无法实现的性能提升。正如我们在本文中探讨的那样,如果正确使用,useSyncExternalStore Hook 可以为您节省大量的开发时间。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论