React createContext 与 useContext 的基本使用

一、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
  

二手房