preface

Because React’s functional components are easy to use (as opposed to the Class component), I’ll focus on using functional components to run development. In this blog series, I’m going to share what I’ve learned about the Hook apis. The Hooks series includes the following:

• useState
• useReducer
• useContext
• useEffect
• useMemo
• useRef
• Customize the Hook

What is the Context

Context is an extended version of props, which can pass values from global data to local components through the Provider interface so that local components surrounded by the provider can access the read-write interface for global data

A global variable can be thought of as a global context

Context is local global variables, because only local components surrounding the provider can get access to their read and write interfaces

usage

• To create the context
• Set up theproviderState is passed through the value interface
• Local components get read and write interfaces

Case to understand

Example reading is the fastest way. In the code below, I will set a parent component, a child component, pass state through useContext, and set a button on the child component to change the global state

import React, { createContext, useContext, useState } from "react";
const initialState = { m: 100.n: 50 }; // Define initial state
const X = createContext(); / / create the Context
let a = 0;
export default function App() {
  console.log(` render the${a}Time `);// Check how many times the App function is executed
  const [state, setState] = useState(initialState); // Create the state read-write interface
  a += 1;
  return (
    <X.Provider value={{ state.setState}} >// Provide values to the enclosing components via provider. Only the enclosing components are valid<Father></Father>
    </X.Provider>
  );
}

const Father = (props) = > {
  const { state, setState } = useContext(X);// Take the value of the context named X and use two variables to receive the read/write interface
  const addN = () = > {
    setState((state) = > {
      return { ...state, n: state.n + 1 };
    });
  };
  const addM = () = > {
    setState((state) = > {
      return { ...state, m: state.m + 1 };
    });
  };
  return (
    <div>Dad components<div>n:{state.n}</div>
      <Child />
      <button onClick={addN}>Set n</button>
      <button onClick={addM}>Set up the m</button>
    </div>
  );
};
const Child = (props) = > {
  const { state } = useContext(X); / / read the state
  return (
    <div>Son components<div>m:{state.m}</div>
    </div>
  );
};
Copy the code

Take the component of the read-write interface and control the state data

Notice the topmost variable a? This is what I used to test. I found that clicking the react context button triggered the App function and updated the page.

conclusion

We learned the basic concepts and functions of Context, and summarized how to use Context through small cases:

• usecreacteContextCreate a context
• Set up theproviderAnd through thevalueAs interfacestatedata
• Local component fromvalueGets the read/write interface from the data object passed in the interface