从 useContext, useReducer, createContext 到 useCallback, memo, useMemo

import {
  useContext, useReducer, createContext,
  useCallback, memo, useMemo, useState
} from "react";

function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return {
        ...state,
        counter: state.counter + 1
      }
    case 'del':
      return {
        ...state,
        counter: state.counter - 1
      }
    case 'reset':
      return {
        ...state,
        counter: 0
      }
    default:
      return state
  }
}
/**
 * 融合useReducer、createContext
 */
const Store = createContext({});
function Provider(props) {
  const [state, dispatch] = useReducer(reducer, { counter: 0, otherState: "【我是其它的state】" });

  return (
    <Store.Provider value={{ state, dispatch }}>
      {props.children}
    </Store.Provider>
  )
}

export default function Parent() {
  return (
    <div style={{ width: 300, margin: "100px auto", fontSize: 20 }}>
      <Provider>
        <Child1></Child1>
        <Child2></Child2>
        <Child3></Child3>
      </Provider>
    </div>
  )
}
/**
 * 父组件使用useCallback防止inline函数引起的不必要更新
 * useContext获取store
 */
function Child1() {
  const { state } = useContext(Store);
  return (
    <div>
      {">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>" + state.counter}
    </div>
  )
}
/**
 * 父组件使用useCallback防止inline函数引起的不必要更新
 * useContext获取dispatch
 */
const Child2 = function () {
  const { dispatch } = useContext(Store);
  const [value, setValue] = useState("");

  const functionWidthUseCallback = useCallback(() => dispatch({ type: "add" }), []);
  const functionWidthOutUseCallback = () => dispatch({ type: "add" });
  {/** input输入导入 functionWidthOutUseCallback多次更新*/}
  return (
    <div>
      <button onClick={() => dispatch({ type: "add" })}>加</button>
      <button onClick={() => dispatch({ type: "del" })}>减</button>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <Child222 type="useCallback" onClick={functionWidthUseCallback} />
      <Child222 type="withOutUseCallback" onClick={functionWidthOutUseCallback} />
    </div>
  )
}
function Child3() {
  const { state } = useContext(Store);
  const otherState = useMemo(() => {
    return state.otherState
  }, []);

  return (
    <div style={{ margin: "100px auto", width: 200 }}>
      其它的state{otherState}
    </div>
  )
}

var Child222 = memo(function (props) {
  console.log("useCallback>>>>>>>>>>>>>>>>>>" + props.type)
  return (
    <div style={{ margin: "100px auto", width: 200 }} onClick={props.onClick}>
      Child222
    </div>
  )
})