被低估的 React Hook - useSyncExternalStore-js教程-PHP中文网

首页

web前端

js教程

被低估的 React Hook - useSyncExternalStore

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 18, 2024 pm 12:16 PM

Image description

概述

发现 React 生态系统中隐藏的强大引擎：“useSyncExternalStore”钩子。本文深入探讨了其变革潜力，挑战了传统的状态管理范式。通过无缝集成外部数据源并增强跨组件通信，该钩子提供了一种非常规但功能强大的方法。

与我们一起揭开useSyncExternalStore的神秘面纱。我们将剖析其机制，揭示其优点，并通过现实世界的示例展示实际应用。最后，您将掌握如何利用这个钩子来简化复杂性、提高性能并为您的代码库带来新的组织水平。

用法

根据 React，useSyncExternalStore 是一个 React Hook，可让您订阅外部存储。但“外部商店”到底是什么？它实际上需要两个函数：

订阅函数应该订阅商店并返回取消订阅的函数。
getSnapshot 函数应该从存储中读取数据的快照。好吧，一开始可能很难得到。我们可以进入示例。

演示

在今天的演示中，我将介绍一个经典应用程序：“待办事项列表”。

商店

首先，我们必须定义初始状态：

export type Task = {
  id: string;
  content: string;
  isDone: boolean;
};

export type InitialState = {
  todos: Task[];
};

export const initialState: InitialState = { todos: [] };

登录后复制

您可以看到我定义了类型，然后创建了包含待办事项的状态作为空数组

现在是减速器：

export function reducer(state: InitialState, action: any) {
  switch (action.type) {
    case "ADD_TASK":
      const task = {
        content: action.payload,
        id: uid(),
        isDone: false,
      };
      return {
        ...state,
        todos: [...state.todos, task],
      };

    case "REMOVE_TASK":
      return {
        ...state,
        todos: state.todos.filter((task) => task.id !== action.payload),
      };

    case "COMPLETE_TASK":
      const tasks = state.todos.map((task) => {
        if (task.id === action.payload) {
          task.isDone = !task.isDone;
        }
        return task;
      });
      return {
        ...state,
        todos: tasks,
      };

    default:
      return state;
  }
}

登录后复制

我们的减速器只有 3 个操作：ADD_TASK、REMOVE_TASK 和 COMPLETE_TASK。这是待办事项列表逻辑的经典示例。

终于等到了，店家：

let listeners: any[] = [];

function createStore(reducer: any, initialState: InitialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function dispatch(action: any) {
    state = reducer(state, action);

    emitChange();
  }

  function subscribe(listener: any) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  const store = {
    dispatch,
    getState,
    subscribe,
  };

  return store;
}

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

export const store = createStore(reducer, initialState);

登录后复制

此代码片段演示了如何在 TypeScript 中创建一个简单的类似 Redux 的状态管理系统。以下是其工作原理的详细说明：

listeners 数组：该数组包含监听器函数列表，每当状态发生变化时，这些函数都会收到通知。
createStore 函数：该函数负责创建 Redux 风格的 store。它需要两个参数：

reducer：一个reducer函数，负责根据当前状态和调度的action计算下一个状态。
初始状态：应用程序的初始状态。

state：该变量保存应用程序的当前状态。
getState 函数：返回当前状态。
dispatch 函数：接受一个action对象，将其与当前状态一起传递给reducer，用结果更新状态，然后调用emitChange函数通知监听者状态变化。
subscribe 函数：接受一个监听器函数，将其添加到监听器数组中，并返回一个清理函数，可以调用该函数来删除监听器。
store 对象：创建的 store 对象保存对dispatch、getState 和 subscribe 函数的引用。
emitChange 函数：遍历侦听器数组并调用每个侦听器函数，通知它们状态更改。

在代码末尾，使用 createStore 函数创建一个存储，并具有给定的减速器和初始状态。现在可以在应用程序的其他部分导入和使用该存储来管理和控制状态。

需要注意的是，这段代码提供了状态管理系统的简化实现，并且缺乏 Redux 等库中的一些高级功能和优化。然而，它是理解使用监听器和减速器函数进行状态管理的基本概念的一个很好的起点。

使用 useSyncExternalStore 挂钩。我们可以得到这样的状态：

const { todos } = useSyncExternalStore(store.subscribe, store.getState);

登录后复制

通过这个钩子调用，我们可以全局动态地访问store，同时保持可读性和可维护性

优点和缺点

“useSyncExternalStore”钩子在 React 应用程序中的状态管理上下文中既具有优点，也具有潜在的缺点：

优点：

与外部源无缝集成：该钩子可以轻松地与外部数据源集成，从而促进统一的状态管理方法。这种集成可以简化对不同来源的数据的处理，增强应用程序的凝聚力。
跨组件通信：“useSyncExternalStore”促进组件之间的高效通信，简化数据共享并减少复杂的 prop 钻取或上下文管理的需要。
性能改进：通过集中状态管理并最大限度地减少状态更新的传播，此挂钩有可能优化渲染性能，从而提高应用程序的响应速度和效率。
简单和干净的代码：钩子的抽象 API 可以生成更干净、更有组织的代码，使其更易于理解和维护，特别是在大型应用程序中。
减少样板：“useSyncExternalStore”可以减少为状态管理编写冗余代码的需要，提供一种简洁且一致的方式来管理应用程序范围的状态。

缺点：

学习曲线：不熟悉此挂钩的开发人员在从更成熟的状态管理解决方案过渡时可能会经历学习曲线。适应新方法最初可能会减慢开发速度。
自定义限制：挂钩的预定义功能可能无法完全符合每个应用程序的独特要求。自定义超出钩子功能的行为可能需要额外的解决方法。
潜在的抽象开销：根据其内部机制，与专门针对应用程序需求定制的更优化的解决方案相比，该钩子可能会在性能或内存使用方面带来轻微的开销。
社区和生态系统：作为一个被低估或鲜为人知的钩子，“useSyncExternalStore”可能缺乏完善的社区和全面的生态系统，可能导致可用资源或第三方库减少.
兼容性和未来更新：与 React 未来版本的兼容性以及钩子本身的潜在更新可能是值得关注的问题。确保长期支持和无缝升级可能需要额外的努力。