React实现控制减少useContext导致非必要的渲染详解

const InstableStateContext = React.createContext();
const StableStateContext = React.createContext();
function Provider({children}) {
  const [instableState, instableDispatch] = React.useState();
  const [stableState, stableDispatch] = React.useState();
return (
    <StableStateContext.Provider value={{state:stableState, dispatch:stableDispatch}}>
      <InstableStateContext.Provider value={{state:instableState, dispatch:instableDispatch}}>
        {children}
      </InstableStateContext.Provider>  
    </StableStateContext.Provider>
  )
}

//stableComponent.js
function stableComponent() {
  const {state} = React.useContext(StableStateContext);
  return ...;
}

const {state}= useContext(AppContext);
return useMemo(() => <span>data:{state.depData}</span>, [state.depData]);

const [state, dispatch] = useReducer(this.reducer, initState);
const store = {
        getState: () => state,
        dispatch,
      }

const [state, dispatch] = useReducer(this.reducer, initState);
const store =useMemo(() => ({
        getState: () => state,
        dispatch,
      }),[]);

  Provider = (props: ProviderProps) => {
    const { children, initState = {} } = props;
    const [state, dispatch] = useReducer(this.reducer, initState);
    //store值不会更新，所以不会触发渲染
    const store = useMemo(
      () => ({
        getState: () => cloneDeep(state),
        dispatch,
      }),
      [],
    );
    return <this.context.Provider value={store}>{children}</this.context.Provider>;
  };

  Provider = (props: ProviderProps) => {
    const { children, initState = {} } = props;
    const [state, dispatch] = useReducer(this.reducer, initState);
    useEffect(() => {
      //告知useSelector，state已更新，让它触发forceUpdate
      this.emit('stateChange');
    }, [state]);
    //store值不会更新，所以不会触发渲染
    const store = useMemo(
      () => ({
        getState: () => cloneDeep(state),
        dispatch,
      }),
      [],
    );
    return <this.context.Provider value={store}>{children}</this.context.Provider>;

const a = useSelector(state=>state.a)

  useSelector: UseSelector = (selector) => {
    const forceUpdate = useForceUpdate();
    const store = useContext<any>(this.context);
    const latestSelector = useRef(selector);
    const latestSelectedState = useRef(selector(store.getState()));
    if (!store) {
      throw new Error('必须在Provider内使用useSelector');
    }
    latestSelector.current = selector;
    latestSelectedState.current = selector(store.getState());
    useEffect(() => {
      const checkForUpdates = () => {
        const newSelectedState = latestSelector.current(store.getState());
        //state发生变化时，检查当前selectedState和更新后的SelectedState是否一致，不一致则触发渲染
        if (!isEqual(newSelectedState, latestSelectedState.current)) {
          forceUpdate();
        }
      };
      this.on('stateChange', checkForUpdates);
      return () => {
        this.off('stateChange', checkForUpdates);
      };
    }, [store]);
    return latestSelectedState.current;
  };

const useForceUpdate = () => {
  const [_, setState] = useState(false);
  return () => setState((val) => !val);
};