2021-05-12 react hook 模拟生命周期

1. componentDidMount：当deps为空时，re-render时不再执行callback

// mount结束，已经更新到DOM
const onMount = function useDidMount(effect) => {
    useEffect(effect, []);
};

2. componentDidUpdate

// layout结束，render DOM之前（会block rendering）
const onUpdate = function useUpdate(effect) => {
  useLayoutEffect(effect, []);
};

3. componentWillUnMount

const unMount = function useWillUnMount(effect, deps = []) => {
  useEffect(() => effect, deps);
};

4. shouldComponentUpdate（或React.PureComponent）

// 使用React.memo包裹组件
const MyComponent = React.memo(() => {
  return <Child prop={prop} />
}, [prop]);

// or
function A({ a, b }) {
  const B = useMemo(() => <B1 a={a} />, [a]);
  const C = useMemo(() => <C1 b={b} />, [b]);
  return (
    <>
      {B}
      {C}
    </>
  );
}