简介
在React应用中，随着组件树的增长，数据传递变得越来越繁琐。React Context提供了一种在不同层级的组件之间共享数据的方法，但是使用Context可能会让代码变得比较冗长。
在这种情况下，我们需要一个工具来简化这个过程。npm包 react-context-helpers 就可以帮助我们轻松地解决这个问题。
安装
安装 react-context-helpers，你只需要在你的项目文件夹中运行以下命令：
npm install react-context-helpers --save
如何使用
我们将演示如何在React应用中使用 react-context-helpers 来共享数据，并且让 Context API 变得更加易于使用。
创建 Context
在使用 react-context-helpers 之前，需要先创建一个 Context。同时，也需要导出 createContextProvider 来提供 Context数据。
下面我们来模拟创建一个 User Context，在这个 Context里，我们将存储用户的信息。
import { createContextProvider } from 'react-context-helpers';
const UserContext = createContextProvider({
name: 'Guest'
});
export default UserContext;创建 Provider
在 Context 的提供者（Provider）中，我们可以指定我们想要共享的数据。
在下面的示例中，我们将在 UserContext提供者中提供了一个 setUser方法，来更新用户信息。
-- -------------------- ---- -------
------ ----------- ---- ----------------
-------- ------------------- -
----- ------ -------- - ----------
----- -------
---
------ -
--------------------- -------- ----- ------- ---
----------------
-----------------------
--
-
------ ------- -------------使用 Context
现在我们有了一个提供者，可以在我们的 React 组件中使用 UserContext。
-- -------------------- ---- -------
------ ----------- ---- ----------------
-------- ------------ -
----- - ----- ------- - - ------------------------
-------- ------------------ -
--------- -------- ----- ------ ---
-
------ -
--
------- ----- ---------------
------- ------------------------------ ---- -- -------------
---
--
-当我们在 UserDetail 组件中调用 setUser 方法时，我们在 Context 中提供的数据将被更新。
共享多个 Context
当我们在React应用中使用多个 Context时，我们需要为每个Context创建提供者。使用 react-context-helpers 可以使此过程更加简单。
-- -------------------- ---- -------
------ - -------------------- - ---- ------------------------
------ ----------- ---- ----------------
------ ------------ ---- -----------------
-------- ----- -------- -- -
------ -
--------------------- ----------------------- ---------------
----------
-----------------------
--
-
------ ------- ----通过创建提取器，我们可以方便地从中访问多个 Context ，并且以最小的代码量将这些 Context 传递到组件中。
-- -------------------- ---- -------
------ - --------------- - ---- ------------------------
------ ----------- ---- ----------------
------ ------------ ---- -----------------
-------- ------------ -
----- - ---- - - -----------------------------
----- - ----- - - ------------------------------
------ -
---- -------- ------ ----------- ---
------- ----- ---------------
------
--
-结论
在这篇文章中，我们演示了如何使用 react-context-helpers 来简化在React应用中操作 Context 的过程。使用 react-context-helpers，我们可以轻松地共享数据并使 Context API 更加易于使用。
在要共享数据的React应用中尝试使用 react-context-helpers 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e1f81e8991b448e7305
