React createContext 与 useContext 的基本使用

一、createContext 的使用

  • 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

  • 只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效。

  • 效果

    image.png

  • 写法一

    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
    
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡尔特斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值