react hook 系列useContext

useContext

• 子组件(函数组件)中可以通过useContext这个 Hook 获取 Provider 提供的数据
• 类似React.createContext()工厂返回的{Porvider,Consumer}中的Consumer
• (类组件)Porvider是个组件，数据提供者,Consumer 也是组件，数据消费者，用来获取Provider提供的数据

import React, {
  useReducer,
  useContext,
} from "react";
const ADD = "ADD";
const MINUS = "MINUS";

function reducer(state, action) {
  switch (action.type) {
    case ADD:
      return { number: state.number + 1 };
    case MINUS:
      return { number: state.number - 1 };
    default:
      return state;
  }
}
/**
 * useContext
 */
let Context = React.createContext();
function Counter() {
  //useContext 可以从 Context拿到向Provider里传的value值
  let [state, dispatch] = useContext(Context);
  return (
    <div>
      <p>{state.number}</p>
      <button onClick={() => dispatch({ type: ADD })}>+</button>
      <button onClick={() => dispatch({ type: MINUS })}>-</button>
    </div>
  );
}
function App() {
  let [state, dispatch] = useReducer(reducer, { number: 0 });
  return (
    <Context.Provider value={[state, dispatch]}>
      <Counter />
    </Context.Provider>
  );
}
export default App;

注意：

useContext 接收context对象 也就是React.createContext的返回值
当最近父组件的<CountContext.Provider>更新时，该 Hook 会触发重渲染，并使用最新数据传递给 provider 的 value 值。