移动端网站优秀案例市场调研分析报告模板
1. Context
在 React 中，Context 提供了一种通过组件树传递数据的方式，无需手动在每个层级传递 props。这在处理一些全局应用状态时非常有用，比如用户认证、主题、语言偏好等。
- 如何使用 Context
创建 Context：首先，你需要使用 React.createContext 创建一个新的 Context 对象。
const MyContext = React.createContext(defaultValue);
这里的 defaultValue 是当组件没有被任何 Provider 包裹时，消费组件（Consumer）会使用的值。
- 提供 Context 值：使用 <Context.Provider> 组件来包裹你的组件树，以便提供 Context 值。
<MyContext.Provider value={/* 一些值 */}><ChildComponent />
</MyContext.Provider>
value 属性可以是任何你想要传递给消费组件的数据，它可以是一个对象，也可以是一个函数。
- 消费 Context 值
使用 useContext Hook：useContext 是一个 Hook，它允许函数组件直接订阅 Context 的变化。
const value = useContext(MyContext);
示例
以下是一个简单的 Context 示例，展示了如何创建和使用 Context 来共享一个主题颜色。
// 创建 Context
const ThemeContext = React.createContext('light');// 提供 Context 值
function App() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);
}// 消费 Context 值
function Toolbar() {return (<div><ThemeButton /></div>);
}function ThemeButton() {const theme = useContext(ThemeContext);return <button>{theme === 'dark' ? 'Light' : 'Dark'}</button>;
}
在这个例子中，ThemeContext 被用来在 App 组件和 ThemeButton 组件之间共享当前的主题颜色。App 组件通过 ThemeContext.Provider 提供了主题颜色的值，而 ThemeButton 组件使用 useContext Hook 来消费这个值。