React 是一个流行的前端框架，它提供了许多强大的功能，例如组件化、虚拟 DOM 等等。而 React Hook 是 React 16.8 版本引入的一项新特性，它可以让我们在不编写类组件的情况下使用状态和其他 React 特性。本文将介绍如何使用 React Hook 和 Context 实现全局主题切换。
什么是 React Hook
React Hook 是 React 16.8 版本引入的一项新特性，它可以让我们在不编写类组件的情况下使用状态和其他 React 特性。React Hook 是一组钩子函数，它们可以让我们在函数组件中使用状态、副作用、生命周期等功能，从而让我们更加方便地编写 React 应用。
什么是 Context
Context 是 React 提供的一种全局状态管理机制。通过 Context，我们可以在组件树中传递数据，而不必手动地将数据逐层传递。Context 通常用于传递一些全局数据，例如当前用户、主题等等。
实现全局主题切换
在本文中，我们将使用 React Hook 和 Context 实现全局主题切换。我们将创建一个 ThemeProvider 组件，它会将当前主题存储在 Context 中，并提供一个切换主题的方法。我们将在 App 组件中使用 ThemeProvider，并将主题传递给所有子组件。
创建 ThemeContext
首先，我们需要创建一个 ThemeContext，用于存储当前主题。我们可以使用 React.createContext 创建一个 Context：
import React from 'react'; export const ThemeContext = React.createContext();
ThemeContext 是一个 Context 对象，它包含了 Provider 和 Consumer 两个属性。我们将在 ThemeProvider 组件中使用 Provider 来提供当前主题，而在其他组件中使用 Consumer 来获取当前主题。
创建 ThemeProvider
接下来，我们需要创建一个 ThemeProvider 组件，它会将当前主题存储在 Context 中，并提供一个切换主题的方法。我们可以使用 useState Hook 来存储当前主题，使用 useCallback Hook 来创建一个切换主题的方法：
-- -------------------- ---- -------
------ ------ - --------- ----------- - ---- --------
------ ----- ------------- - -- -------- -- -- -
----- ------- --------- - ------------------
----- ----------- - -------------- -- -
-------------- --- ------- - ------ - ---------
-- ---------
------ -
---------------------- -------- ------ ----------- ---
----------
------------------------
--
--ThemeProvider 组件接收一个 children 属性，它是所有子组件。在 ThemeProvider 中，我们使用 useState Hook 来存储当前主题，初始值为 'light'。我们还使用 useCallback Hook 来创建一个切换主题的方法 toggleTheme，它会将当前主题从 'light' 切换到 'dark''，或者从 'dark' 切换到 'light'。最后，我们使用 Provider 将当前主题和切换主题的方法传递给所有子组件。
使用 ThemeProvider
现在，我们已经创建了 ThemeContext 和 ThemeProvider，我们可以在 App 组件中使用它们来实现全局主题切换。我们可以将所有子组件包裹在 ThemeProvider 中，并将当前主题传递给它们：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ------------------
------ - ------ - ---- -----------
------ - ---- - ---- ---------
------ - ------ - ---- -----------
------ ----- --- - -- -- -
------ -
---------------
------- --
----- --
------- --
----------------
--
--在 App 组件中，我们使用 ThemeProvider 将所有子组件包裹起来，并将当前主题传递给它们。在子组件中，我们可以使用 Consumer 来获取当前主题：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ------------ - ---- ------------------
------ ----- ------ - -- -- -
----- - ------ ----------- - - -------------------------
------ -
------- ------------------ -----------
------ --------
------- ---------------------------- --------------
---------
--
--在 Header 组件中，我们使用 useContext Hook 来获取当前主题和切换主题的方法，然后将当前主题应用到 header 元素的类名中。我们还在 button 元素上绑定了 toggleTheme 方法，这样用户就可以切换主题了。
总结
本文介绍了如何使用 React Hook 和 Context 实现全局主题切换。我们创建了一个 ThemeProvider 组件，它会将当前主题存储在 Context 中，并提供一个切换主题的方法。我们还使用 useContext Hook 来获取当前主题和切换主题的方法，并将当前主题应用到组件中。通过这种方式，我们可以方便地实现全局主题切换，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e445801886fbafa405fd8d