useContext

可以跨组件传值

其实主要的就是三步

1、const xxx = React.createContext();创建一个context

2、父组件设置要传递的值

3、const { num, setNum } = React.useContext(xxx);子组件下使用

特点：

1、可以有多个xxx.Provider

2、可以跨组件传递

3、可以传递多个值

store.js

import React from 'react'
const myContext = React.createContext(null);
export {myContext};

App.js

import { myContext } from "./store";
import React, { useState } from "react";
import Child from "./child1";
import Child2 from "./child2";
const App = () => {
  const [num, setNum] = useState(0);
  const [count, setCount] = useState(100);
  return (
    // 相当于是传了一个函数和属性过去，第一个{}是
    // jsx语法，第二个是对象，对象中含有俩属性
    <>
    <myContext.Provider value={{ setNum, num }}>
      <Child></Child>
    </myContext.Provider>
    <myContext.Provider value={{ setCount, count }}>
      <Child2></Child2>
    </myContext.Provider>
    </>
    
  );
};

export default App;

child2.js

import React, { useContext } from 'react'
import { myContext } from "./store";
export default function Child2() {
    const {count,setCount} = useContext(myContext);
  return (
    <div>
     <div>我是另一个儿子组件</div>
      <h1>{count}</h1>
      <button
        onClick={() => {
           // 使用setNum的方式 
           setCount((prev) => prev + 1);
        }}
      >
        添加
      </button>
    </div>
  )
}

child1.js

import { myContext } from "./store";
import React, { useContext} from "react";
import GrandSon from "./grandSon";

const Child = (props) => {
  const { setNum, num } = useContext(myContext);
  return (
    <>
    <div>我是儿子组件</div>
      <h1>{num}</h1>
      <button
        onClick={() => {
           // 使用setNum的方式 
          setNum((prev) => prev + 1);
        }}
      >
        添加
      </button>
      <GrandSon num={num} />
    </>
  );
};

export default Child;

grandSon.js(第一个孩子的子组件)

import { myContext } from "./store";
import React, { useContext } from "react";

const GrandSon = (props) => {
  const { setNum, num } = useContext(myContext);
  return (
    <>
      <h1>我是孙子组件</h1>
      <h1>{num}</h1>
      <button
        onClick={() => {
          setNum((prev) => prev + 1);
        }}
      >
        添加
      </button>
    </>
  );
};

export default GrandSon;

1.当添加添加按钮时数据是同步变化的；
2.被另一个xxx.Provider包裹的子组件的数据是不受影响的，其数据是单独变化的。