useContext用法

第一种方法

index.js文件：

import React, { createContext } from "react";
import ReactDOM from "react-dom";
import App from "./App";
export const context = createContext(); //创建一个上下文context
const { Provider } = context; // Provider叫做数据提供器

ReactDOM.render(
  <Provider value={{ name: "lisi", age: 20 }}>
    <App />
  </Provider>,
  document.getElementById("root")
);

App.js文件：

import React, { useContext } from "react"; // useContext表示使用上下文
import { context } from "./components/Provider";
import A from "./components/A";
import B from "./components/B";
function App() {
  const { count, setCount } = useContext(context);
  return (
    <div className="App">
      <h3
        onClick={() => {
          setCount(count + 1);
        }}
      >
        app
      </h3>
      <span>{count}</span>
      <hr />
      <A />
      <hr />
      <B />
    </div>
  );
}

export default App;

组件A：

import React, { useContext } from "react";
import { context } from "../../App";

function A() {
  const { name } = useContext(context);

  return (
    <div className="D">
      <h3>A组件</h3>
      <span>{name}</span>
    </div>
  );
}

export default A;

第二种把数据提供context拆出去

index。js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Tigong from "./components/Provider";

ReactDOM.render(
  <Tigong>
    <App />
  </Tigong>,
  document.getElementById("root")
);

Provider组件

import React, { createContext, useState } from "react";
export const context = createContext(); // 创建一个上下文

const { Provider } = context;

function MyProvider({ children }) {
  const [count, setCount] = useState(10);
  //   把方法和属性都传过去，使用的地方可以通过方法修改context的值
  return <Provider value={{ count, setCount }}>{children}</Provider>;
}

export default MyProvider;

App.js

import React, { useContext } from "react"; // useContext表示使用上下文
import { context } from "./components/Provider";
import A from "./components/A";
import B from "./components/B";
function App() {
  const { count, setCount } = useContext(context);
  return (
    <div className="App">
      <h3
        onClick={() => {
          setCount(count + 1);
        }}
      >
        app
      </h3>
      <span>{count}</span>
      <hr />
      <A />
      <hr />
      <B />
    </div>
  );
}

export default App;

A组件

import React, { useContext } from "react";
import { context } from "./Provider";

function A() {
  const { count, setCount } = useContext(context);
  return (
    <div>
      <h3 onClick={() => setCount(count + 2)}>我是A组件</h3>
      <span>{count}</span>
    </div>
  );
}

export default A;