一、createContext 的使用
- 创建一个
Context对象。当React渲染一个订阅了这个Context对象的组件，这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。 - 只有当组件所处的树中没有匹配到
Provider时，其defaultValue参数才会生效。 - 效果
- 写法一
import React, { createContext } from "react"; // 直接由父组件传值到 ComC // 方式一：App -> ComA -> ComB -> ComC // 方式二：App -> ComC // 1、导入 createContext，解构出提供者（Provider）与消费者（Consumer） const { Provider, Consumer } = createContext() function ComA () { return ( <> <div>组件A</div> <ComB></ComB> </> ) } function ComB () { return ( <> <div>组件B</div> <ComC></ComC> </> ) } function ComC () { return ( <> <span>组件C - </span> {/* 3、通过 Consumer 使用数据 */} <Consumer> { (value) => <span>{ value }</span> } </Consumer> </> ) } class App extends React.Component { state = { msg: '父组件消息' } render () { return ( // 2、使用 Provider 包裹跟组件 <Provider value={this.state.msg}> <ComA></ComA> </Provider> ) } } export default App
- 写法二
import React, { createContext } from "react"; // 直接由父组件传值到 ComC // 方式一：App -> ComA -> ComB -> ComC // 方式二：App -> ComC // 1、导入 createContext const content = createContext() function ComA () { return ( <> <div>组件A</div> <ComB></ComB> </> ) } function ComB () { return ( <> <div>组件B</div> <ComC></ComC> </> ) } function ComC () { return ( <> <span>组件C - </span> {/* 3、通过 Consumer 使用数据 */} <content.Consumer> { (value) => <span>{ value }</span> } </content.Consumer> </> ) } class App extends React.Component { state = { msg: '父组件消息' } render () { return ( // 2、使用 Provider 包裹跟组件 <content.Provider value={this.state.msg}> <ComA></ComA> </content.Provider> ) } } export default App
二、useContext 的使用
- 接收一个
context对象（React.createContext的返回值）并返回该context的当前值。
import React from "react"; const content = React.createContext(null); function App() { const [theme, setTheme] = React.useState('red'); return ( <content.Provider value={{ theme, setTheme }}> <div className={`App ${theme}`}> <div>{theme}</div> <ChildA /> <ChildB /> </div> </content.Provider> ); } function ChildA() { const { setTheme } = React.useContext(content); return ( <button onClick={() => setTheme('red')}>red</button> ); } function ChildB() { const { setTheme } = React.useContext(content); return ( <button onClick={() => setTheme('blue')}>blue</button> ); } export default App
