UseContext role

  1. Context provides a way to pass data across the component tree without manually adding props for each layer of components.
  2. Context is designed to share data that is “global” to a component tree, such as the currently authenticated user, topic, or preferred language.

UseContext use

createContext

const P = createContext(defaultValue);
Copy the code

Create a Context object using createContext. I can subscribe to this Context object using useContext. The component reads the current context value from the nearest upper-layer Provider in the component tree. If there is no match, the value is defaultValue.

Provider

Each Context object returns a Provider React component, which allows the consuming component to subscribe to changes to the Context. Multiple providers can also be nested, with the inner layer overwriting the data in the outer layer.

<P.Provider value={/* 值 */}>
...
</P.Provider>
Copy the code

useContext

UseContext receives a context object (the return value of react. createContext) and returns the current value of the context. The current context value is determined by the value of the upper-layer component < p.provider value={}> that is closest to the current component. Note: The argument to useContext must be the context object itself

// P Context object is created by createContext
const count = useContext(P);
Copy the code

Multilevel use

import React, { createContext, useContext, useState } from "react";
// Create a context
const P = createContext(null);
// Create a context with default values
const B = createContext({ value: 3333.count: 12121 });

/ / child component
const Pa = () = > {
  / / get P - Context
  const { count, setCount } = useContext(P);
  const add = () = > {
    setCount((n) = > n + 1);
  };

  return <div onClick={add}>pa==P==={count}</div>;
};

// Grandchild component
const Ba = () = > {
  / / get B - the Context
  const value = useContext(B);

  return <div>Ba==B==={value.value}</div>;
};

// Grandchild component
const Bb = () = > {
  / / get P - Context
  const count = useContext(P);
  / / get B - the Context
  const value = useContext(B);

  return (
    <div>Bb B = = = = = {value. Value}, Bb default = = = = = = B = = {value. The count}.<br />
      Pb--P==={count.count},
    </div>
  );
};

/ / child component
const Pb = () = > {
  / / get P - Context
  const { count, setCount } = useContext(P);
  const add = () = > {
    setCount((n) = > n + 1);
  };

  return (
    <div>
      <div onClick={add}>Pb==P==={count}</div>{/* add a new P--Context */}<P.Provider value={{ count: 2222}} >
        <B.Provider value={{ value: 1111}} >
          <Ba></Ba>
          <Bb></Bb>
        </B.Provider>
      </P.Provider>
    </div>
  );
};

// Top-level components
const Home = (props) = > {
  const [count, setCount] = useState(0);

  return (
    <div>
      <P.Provider value={{ count.setCount}} >
        <Pa></Pa>
        <Pb></Pb>
      </P.Provider>
    </div>
  );
};

export default Home;
Copy the code
  1. In the component tree<P.Provider>Occurs multiple times, subscription componentContextValue, nearest to the level above<P.Provider>The value shall prevail.
  2. When the upper layer of the component tree is not used<B.Provider>Package, can be used directlyuseContext(B)The value is the default value set.
  3. Multiple are used in the component treeContext.ProviderParcel, just be carefuluseContext()The incomingContextObject to get the corresponding value.

The resources

Hook API index Context