首页 > web前端 > js教程 > 正文

不要使用 React.Context,创建钩子。

王林
发布: 2024-09-05 06:44:26
原创
702 人浏览过

Don

在本文中,我们将了解如何在应用程序中摆脱 React.Context 并找到这样做的动机。

如果您阅读本文,您可能熟悉 React,并且可能已经有了 React.Context 的经验,但如果没有,请随时阅读它并与可能感兴趣的人分享。


1. 为什么要避免使用 React.Context?

上下文会降低可读性、纠缠和限制应用程序。

看看这个基本示例:

<ThemeContext.Provider value={theme}>
  <AuthContext.Provider value={currentUser}>
    <ModalContext.Provider value={modal}>
      <VolumeContext.Provider value={volume}>
        <RouterProvider router={router} />
      </VolumeContext.Provider>
    </ModalContext.Provider>
  </AuthContext.Provider>
</ThemeContext.Provider>
登录后复制

看起来不太容易理解和可靠,是吗? ​​

以下是使用上下文时的一些潜在问题:

  1. 使用的上下文越多,您的应用程序的可读性和可控性就越差;
  2. 有时嵌套上下文需要正确的顺序才能工作,这使得您的应用程序难以维护;
  3. 在设置测试环境期间应重复使用一些上下文以保持正常工作;
  4. 您必须确保该组件是必要上下文提供者树中的子组件。

有趣的事实:众所周知的“承诺地狱”看起来很相似 ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });
登录后复制

2.如何替换React.Context?

改为创建挂钩。

让我们用自定义 useTheme 挂钩替换上面示例中的 ThemeContext:

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};
登录后复制

我们使用了一个名为 use-app-events 的 npm 包来让 useTheme 挂钩的所有实例进行通信以同步其主题状态。它确保在应用程序中多次调用 useTheme 时主题值相同。

此外,得益于 use-app-events 包,主题甚至可以在浏览器选项卡之间同步

此时,不再需要 ThemeContext,因为可以在应用程序中的任何位置使用 useTheme 挂钩来获取当前主题并更新它:

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: <div>Current theme: light</div>
  return <div>Current theme: {theme}</div>;
}
登录后复制

这种方法的优点是什么:

  1. 无需在树上的某个地方设置挂钩,孩子就可以使用它(包括测试环境);
  2. 渲染结构更加清晰,这意味着不再根据上下文构建令人困惑的箭头形结构;
  3. 状态在选项卡之间同步。

结论

React.Context 确实是一个强大的工具,但如果与 use-app-events 包一起正确实现,钩子提供了一种更受控制和更可靠的方式来管理应用程序的全局状态。

以上是不要使用 React.Context,创建钩子。的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!