react ComponentDidMount与render的顺序

在class组件中,是render->ComponentDidMount->render

在function组件中,是return -> ->useLayoutEffect->useEffect

useLayoutEffect 是在 render 后同步执行的，useEffect 是在 render 后异步执行

用 useLayoutEffect 能保证在 useEffect 之前被调用

useEffect会在组件卸载的时候执行清除操作。useEffect 会在执行当前 effect 之前对上一个 effect 进行清除(也就是return内的函数)。

参考资料

从根上理解 React Hooks 的闭包陷阱（续集）