React 中的 Context 传值及使用技巧
React 中的 Context 提供了一种在组件树中共享数据的方式，让组件之间的数据传递变得更为方便。在复杂的应用中，Context 可以让开发者避免 Props 层层传递的麻烦，同时保持组件间的独立性。
在本文中，我们将介绍 React Context 的使用方法和技巧，探讨 Context 的优缺点，帮助读者更好的掌握这一技术。
什么是 Context
Context 是 React 提供的一种数据传递方式，可以让开发者在组件树中共享数据。在一个组件树中，从最外层的父组件到最内层的子组件，数据通过 Context 被传递下去。使用 Context，开发者可以避免大量的 Props 层层传递，并且保持组件的独立性。
在 React 中，Context 是一个对象，分为两部分：Provider 和 Consumer。
Provider 提供了数据，而 Consumer 消费 Provider 提供的数据。
Context 中的数据可以是任何类型，包括数字、字符串、对象和函数等。
如何使用 Context
使用 Context 分为两个步骤：
- 创建一个 Context 对象
在 React 中创建 Context 对象时，需要使用 createContext() 方法来定义，如下所示：
const MyContext = React.createContext(defaultValue);
defaultValue 是一个可选参数，表示在组件树中找不到 Provider 时的默认值。通常会给它一个 null 或者 undefined，表示没有找到 Provider 时会报错。
- 在组件中使用 Context
Consumer 可以通过一个函数来消费 Provider 提供的数据，函数的参数就是 Provider 提供的数据。
在组件的 render 方法中，直接将 Consumer 作为组件的子组件，传递给 Consumer 的函数即可获取 Provider 提供的数据。
下面是一个简单的示例，展示了如何使用 Context 传递数据：
-- -------------------- ---- -------
------ ------ - -------------- ---------- - ---- --------
----- --------- - --------------- ----- ------- ---
-------- ------- -
----- - ---- - - ----------------------
------ --------- ------------
-
-------- ----- -
------ -
------------------- -------- ----- ------- ---
------ --
---------------------
--
-在上面的例子中，创建了一个 MyContext 对象，并将其作为 Provider 包裹在 App 组件中。Provider 的 value 属性表示要传递给 Consumer 的数据（这里是一个对象，包含了一个 name 属性）。
在 Child 组件中，通过 useContext() 方法获取 Provider 提供的值，得到 name 属性，并用于组件的渲染。
最终，页面中会显示 "Hello, React!"。
使用 Context 的技巧
在使用 Context 时，需要注意一些技巧，才能让代码更加可读和可维护。
多个 Context 的嵌套
在一个应用中，可能需要多个 Context 的嵌套。在这种情况下，每个 Consumer 可以通过嵌套或者从父组件传递的方式获取到 Provider 提供的数据。
可以通过 useContext() 方法来获取多个 Context 提供的数据：
const myContext1 = useContext(MyContext1); const myContext2 = useContext(MyContext2);
避免过度使用 Context
使用 Context 可以方便地共享数据，但也可能导致代码复杂性的增加。因为 Consumer 可以获取 Provider 中的任何数据，所以在处理多个 Provider 时，需要小心谨慎，避免数据混乱，建议多使用 prop drilling。
如果 Provider 提供的数据是组件特定的，应该将其作为 Prop 传递。只有在 Provider 提供的数据是整个应用特定的，并且需要在多个组件之间共享时，才应该使用 Context。
默认值
在 createContext() 方法中，可以传递一个默认值。如果 Consumer 找不到 Provider，会使用这个默认值。所以，在使用 Context 时建议设置合适的默认值，而且需要确保默认值的类型与 Provider 提供的类型一致。
性能优化
React 会监听 Context 的变化，如果 Consumer 组件中调用了 setState()，那么这个组件及其子组件都会重新渲染。但是，可以通过使用 shouldComponentUpdate() 方法或者 PureComponent 来避免意外的重新渲染。
使用 ContextType
除了 useContext() 方法，还可以使用一个类的静态属性来获取 Context 提供的数据，这个属性称为 ContextType。
class MyClass extends React.Component {
static contextType = MyContext;
render() {
const { name } = this.context;
return <p>Hello, {name}!</p>;
}
}使用 ContextType 可以让代码更加简洁和可读，但也会将 Context 的依赖关系硬编码到组件的静态属性中，因此需要考虑清楚是否需要使用它。
结论
React 中的 Context 是一个非常有用的工具，可以方便地在组件树中共享数据。合理的使用 Context 可以提高开发效率和代码可读性，但也需要小心谨慎，避免过度使用和不必要的优化。
掌握 Context 的使用技巧，可以让 React 开发更加高效和优雅，同时增强代码的可维护性。
示例代码如下：
-- -------------------- ---- -------
------ ------ - -------------- ---------- - ---- --------
----- --------- - --------------- ----- ------- ---
-------- ------- -
----- - ---- - - ----------------------
------ --------- ------------
-
-------- ----- -
------ -
------------------- -------- ----- ------- ---
------ --
---------------------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3eb66f40ec5a964e5e3a8