React createContext 与 useContext 的基本使用

简介: 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
相关文章
|
2月前
|
前端开发
react中 useContext 和useReducer的使用
react中 useContext 和useReducer的使用
react中 useContext 和useReducer的使用
|
18天前
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
14 0
|
3月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
72 1
|
4月前
|
前端开发 JavaScript API
React小记(四)_路由的基本使用
React小记(四)_路由的基本使用
32 1
|
3月前
|
前端开发
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
38 0
|
5月前
|
前端开发
掌握React中的useContext:访问父组件数据的神奇技巧
掌握React中的useContext:访问父组件数据的神奇技巧
|
5月前
|
存储 前端开发 JavaScript
React Hooks实战:从useState到useContext深度解析
React Hooks 深度解析:useState用于函数组件的状态管理,通过初始化和更新状态实现渲染控制;useContext则提供跨组件数据传递。useState的状态更新是异步的,不支持浅比较,可结合useEffect处理副作用。useContext在多层组件间共享状态,但可能导致不必要的渲染。两者结合可创建复杂应用场景,如带主题切换的计数器。了解其工作原理和优化策略,能有效提升React应用性能。
81 0
|
5月前
|
前端开发
深入理解 React 中的 Context(二)useContext、createContext
深入理解 React 中的 Context(二)useContext、createContext
174 0
|
5月前
|
前端开发 JavaScript
React中react-redux的基本使用
React中react-redux的基本使用
|
2月前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
46 0