背景
之前我一度觉得React18之后的学习者没必要去了解componentDidMount（我本人就是）。后来才发现想要系统地学习React生命周期，根本就不可能避开这个点，也没必要避开。毕竟这是所有React老项目中的高频关键字，属于“养老护工”必备知识。
基本概念
React生命周期中的钩子函数，当组件挂载时执行，类似于Vue中的created。
在生命周期中的角色
React生命周期常用的钩子函数其实就两个，componentDidMount和componentDidUpdate。
前者作为创建时执行的函数，在整个生命周期中只会执行一次。后续setState等操作引发的更新只会执行componentDidUpdate函数。
所以有些事，真的只能做一次~
常见问题
componentDidMount是否等同于useEffect( () =>, []) ?
在我们常见的使用场景中，很难发现差别，看起来都是只在组件创建时执行一次的钩子。
但是当你为state设置了初始化值，并且使用useEffect为state修改值时，可能会导致视图闪烁。原因是useEffect是异步的，它会在你初始值已经渲染完成之后执行，导致再次渲染。
使用componentDidMount则不会遇到这个问题，因为componentDidMount里面的逻辑是同步的，在其内部为state设置值的时候会占据js进程，导致初始值无法进行渲染这一操作。
那我要如何模拟componentDidMount呢？
可以使用useLayoutEffect，但不支持ssr渲染。
为什么我的componentDidMount会执行两次？
可能是因为使用了严格模式组件（StrictMode），它会让你更容易发现代码中的副作用。删掉即可。
