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