在本文中,我们将了解如何在应用程序中摆脱 React.Context 并找到这样做的动机。
如果您阅读本文,您可能熟悉 React,并且可能已经有了 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>
看起来不太容易理解和可靠,是吗?
以下是使用上下文时的一些潜在问题:
有趣的事实:众所周知的“承诺地狱”看起来很相似 ?♂️
loadClients() .then((client) => { return populate(client) .then((clientPopulated) => { return commit(clientPopulated); }); });登录后复制
改为创建挂钩。
让我们用自定义 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>; }
这种方法的优点是什么:
React.Context 确实是一个强大的工具,但如果与 use-app-events 包一起正确实现,钩子提供了一种更受控制和更可靠的方式来管理应用程序的全局状态。
以上是不要使用 React.Context,创建钩子。的详细内容。更多信息请关注PHP中文网其他相关文章!