本文介绍了在React应用中，当两个组件不存在父子关系时，如何共享变量。核心方法是利用React的Context API，它允许你在组件树中传递数据，而无需手动地在每一层传递 props。通过Context，你可以方便地在不同组件之间共享状态，避免了繁琐的props传递过程。
在React应用开发中，组件间的数据共享是一个常见需求。当组件之间存在父子关系时，可以通过props传递数据。然而，当组件之间不存在直接的父子关系时，传统的props传递方式会变得繁琐且难以维护。这时，React的Context API就派上了用场。
Context API简介
Context API提供了一种在组件树中传递数据的方式，而无需手动地在每一层传递 props。它允许你在组件树的顶层创建一个Context，然后在任何需要的组件中访问该Context提供的值。这对于共享全局状态、主题设置、用户认证信息等非常有用。
使用Context API共享变量的步骤
-
创建Context：
首先，使用React.createContext()创建一个Context对象。
import React from 'react'; const MyContext = React.createContext(null); // 初始值为null，可以根据实际情况设置 export default MyContext;
React.createContext() 接收一个可选的默认值作为参数。这个默认值只有在组件在组件树中没有找到匹配的 Provider 时才会生效。
-
提供Context：
使用MyContext.Provider组件包裹需要提供Context的组件树。Provider组件接收一个value prop，用于设置Context的值。
import React, { useState } from 'react'; import MyContext from './MyContext'; import OtherComponent from './OtherComponent'; function Landing() { const [searchQuery, setSearchQuery] = useState(""); const [searchQueryWords, setSearchQueryWords] = useState([]); const contextValue = { searchQuery: searchQuery, searchQueryWords: searchQueryWords, }; return ({/* Landing组件的其他内容 */} ); } export default Landing;在这个例子中，Landing组件使用MyContext.Provider包裹了OtherComponent。searchQuery和searchQueryWords被封装到contextValue对象中，并作为value传递给Provider，使得OtherComponent及其子组件可以访问这些值。
艾零三企业网站系统1.7 Build 120226下载艾零三（a03web）企业网站系统免费版，本系统特点为后台有可视化的用户控件引用功能，无需编程即可使用丰富的企业网站功能，此版本为免费版，无任何功能限制。 系统环境 asp.net2.0+access，发布包中包含一个微服务器环境，不需要装Microsoft .NET Framework v2.0 也可以访问网站。 艾零三（a03web）企业网站系统包含功能有： 网站单页资料模块：可在后台分组设立
-
消费Context：
在需要访问Context值的组件中，可以使用useContext hook。
import React, { useContext } from 'react'; import MyContext from './MyContext'; function OtherComponent() { const context = useContext(MyContext); if (!context) { returnNo context available
} const { searchQuery, searchQueryWords } = context; return (); } export default OtherComponent;Search Query: {searchQuery}
Search Query Words: {searchQueryWords.join(', ')}
useContext(MyContext)会返回MyContext.Provider提供的value值。现在，OtherComponent就可以访问searchQuery和searchQueryWords了。
注意事项
- Context的粒度： Context应该只用于共享全局或应用级别的状态。过度使用Context可能会导致组件难以复用和测试。
- 性能优化： 当Context的值发生变化时，所有消费该Context的组件都会重新渲染。为了避免不必要的渲染，可以使用React.memo或其他优化手段。
- 默认值： 在创建Context时，可以提供一个默认值。当组件在组件树中没有找到匹配的 Provider 时，就会使用这个默认值。
总结
Context API是一种强大的工具，可以简化React应用中组件间的数据共享。通过创建Context、提供Context和消费Context，你可以轻松地在不同组件之间传递数据，而无需手动地传递 props。合理使用Context API可以提高代码的可读性和可维护性。在上面的例子中，即使Landing和OtherComponent之间没有直接的父子关系，OtherComponent也可以通过Context API访问到Landing组件中的searchQuery和searchQueryWords变量。
