在 React 开发中，状态管理是非常重要的部分。React 提供了一些方式来管理组件间的状态，例如 React Redux 和 MobX 等。不过，对于一些小型应用或独立组件而言，使用这些库会显得过于繁琐。为了解决这个问题，React 提供了一个更加轻量级的状态管理方式 - React Context API。
React Context API 简介
React Context API 可以让我们通过一个叫做 Context 的全局对象来传递数据。这个数据可以是任何类型的值，包括函数和对象等。我们可以使用 Context 来避免通过 props 将数据一层层传递下去，从而将数据直接传递给需要它的组件。
当然，React Context API 并不适用于所有场景。如果数据需要被多个组件共享，那么使用类库来进行状态管理可能更加合适。
使用 React Context API
接下来，我们将通过一个计数器应用的例子来介绍如何使用 React Context API。
创建 Context
下面是创建 Context 的代码：
import { createContext } from 'react';
const CounterContext = createContext();提供数据
我们可以在一个组件中提供我们想要共享的数据：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------------- - ---- -------------------
----- --- - -- -- -
----- ------- --------- - ------------
------ -
------------------------ -------- ------ -------- ---
-------- --
--------------------------
--
--
------ ------- ----在这里，我们创建了一个值为 { count, setCount } 的对象，并将它作为 Provider 的 value 属性的值传递给了 CounterContext。
使用数据
在组件中可以通过 Consumer 来使用 Context 中的数据：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - -------------- - ---- -------------------
----- ------- - -- -- -
----- - ------ -------- - - ---------------------------
------ -
-----
----------------
------- ----------- -- -------------- - ---------------
------
--
--
------ ------- --------在这里，我们通过 useContext hook 来获取了 Context 中的数据，并在组件中使用。这样就可以避免 props 层层传递了。
最佳实践
将 Context 文件单独抽离出来
我们可以将 Context 提取为一个独立的文件，从而在多个组件中共享。这样做还可以避免组件之间的耦合性。
// CounterContext.js:
import { createContext } from 'react';
export const CounterContext = createContext();-- -------------------- ---- -------
-- -------
------ ------ - -------- - ---- --------
------ - -------------- - ---- -------------------
------ ------- ---- ------------
----- --- - -- -- -
----- ------- --------- - ------------
------ -
------------------------ -------- ------ -------- ---
-------- --
--------------------------
--
--
------ ------- ----实现默认值
如果在 Provider 中没有提供 value 属性，那么子组件在使用 useContext 时将会使用默认值。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - -------------- - ---- -------------------
----- ------- - -- -- -
----- - ----- - -- -------- - - ---------------------------
------ -
-----
----------------
------- ----------- -- -------------- - ---------------
------
--
--
------ ------- --------将 Context 数据和方法分开
在上面的例子中，我们将所有数据和方法都放到了一个对象中，并将这个对象传递给了 Context 的 Provider。如果使用多个 Context 对象来处理数据和方法，会更加合理和易于理解。
-- -------------------- ---- -------
-- ------------------
------ - ------------- - ---- --------
------ ----- -------------- - ----------------
------ ----- --------------- - -- -------- -- -- -
----- ------- --------- - ------------
------ -
------------------------ -------- ----- ---
------------------------ -------- -------- ---
----------
--------------------------
--------------------------
--
--
------ ----- -------------- - ------------------ -------------------- ---- -------
-- -------
------ ----- ---- --------
------ - --------------- - ---- -------------------
------ ------- ---- ------------
----- --- - -- -- -
------ -
-----------------
-------- --
------------------
--
--
------ ------- ------ -------------------- ---- -------
-- -----------
------ ------ - ---------- - ---- --------
------ - --------------- -------------- - ---- -------------------
----- ------- - -- -- -
----- - ----- - - ---------------------------
----- - -------- - - ---------------------------
------ -
-----
----------------
------- ----------- -- -------------- - ---------------
------
--
--
------ ------- --------结论
React Context API 是一个非常好的状态管理方式，它可以使组件之间的数据传递更加简单易懂。当然，在使用 React Context API 时，我们也应该注意不要滥用它，不适用的场景还是应该采用其他方式进行状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671db82f9babaf620fb7c8bd