React-Context机制

FOREVER-Q2024-03-06 9:54

1.概念

说明：通过Context机制跨层级组件通讯。父传子。

2.实现步骤

说明：使用createContext方法创建实例对象；顶层组件通过实例对象上面的Provider组件提供数据；底层组件中通过useContext钩子函数获取数据。

3.代码实现

3.1使用createContext方法创建实例对象

javascript 复制代码

const MsgContext=createContext()

3.2 顶层组件通过实例对象上面的Provider组件提供数据

javascript 复制代码

// 顶层组件
function App() {
  const msg='this is app msg'
  return (
    <div>
      {/* 上下文允许组件之间共享数据，而无需通过逐层传递属性（props） */}
      <MsgContext.Provider value={msg}>
      this is app
      <Son1></Son1>
      </MsgContext.Provider>
    </div>
  );
}

3.3 底层组件中通过useContext钩子函数获取数据

javascript 复制代码

function Son2() {
  const msg=useContext(MsgContext)
  return <div>
    this is son2,{msg}
  </div>;
}

4.源代码

javascript 复制代码

// 实现步骤：
// l.使用createContext方法创建一个上下文对象Ctx
// 2.在顶层组件(App)中通过Ctx.Provider组件提供数据
// 3.在底层组件(B)中通过useContext钩子函数获取消费数据

import {createContext, useContext} from 'react'
const MsgContext=createContext()



function Son1() {
  return <div>
    this is son1
    <Son2></Son2>
  </div>;
}
function Son2() {
  const msg=useContext(MsgContext)
  return <div>
    this is son2,{msg}
  </div>;
}
// 顶层组件
function App() {
  const msg='this is app msg'
  return (
    <div>
      {/* 上下文允许组件之间共享数据，而无需通过逐层传递属性（props） */}
      <MsgContext.Provider value={msg}>
      this is app
      <Son1></Son1>
      </MsgContext.Provider>
    </div>
  );
}

export default App;