react中使用useContext跨层级通信

一夜醒来头秃了

已于 2023-06-06 20:22:57 修改

阅读量540

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

于 2022-05-10 11:39:19 首次发布

本文链接：https://blog.youkuaiyun.com/hs1219462412/article/details/124684375

react 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在React中使用useContext实现模块化开发中的状态管理，通过MyContext提供者和子组件的 useContext，实现实时数据同步。重点展示了在Index组件中修改state并影响子组件Child1和Child2的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模块化开发使用useContext

import React, { useState } from "react";
import Child1 from "./Child1";
import Child2 from "./Child2";
import MyContext from "./context";

export default function Index() {
  const [state, setState] = useState({
    name: "xx",
    age: 24,
    arr: [1, 2, 3],
  });

  return (
    <div>
      <h1>Home</h1>
      <button
        onClick={() => {
          // 修改state中的数据，context向子组件传递的数据也会更新
          setState((pre) => ({ ...pre, name: "lala" }));
        }}
      >
        home-btn
      </button>
      <MyContext.Provider value={{ state, setState }}>
        <Child1 />
        <Child2 />
      </MyContext.Provider>
    </div>
  );
}

// Child1 - 子组件
import { useContext } from 'react'
function Child1() {
	// 这里的state、setState和父组件中声明的useState数据同步
	const { state, setState } = useContext(MyContext); // MyContext 是上面引入的context
	
	return <div>{state.name}</div>
}

// Child2 - 子组件
function Child2() {
	// 这里的state、setState和父组件中声明的useState数据同步
	const { state, setState } = useContext(MyContext); // MyContext 是上面引入的context
	
	return <div>{state.name}</div>
}

上述 import 引入的 MyContext 可以直接在模块文件夹里面新建context.js

import React from "react";

const myContext = React.createContext({});

export default myContext;