在React中，函数组件的渲染流程相对简单，具体步骤如下：
初始化
react 调用函数式组件，就像调用函数那样，只不过参数为 Props
当遇到hooks时：
✨ useState
标记State
✨ useEffect
收集所有 effect
最后返回vDom
由react-dom库来解析vDom，绘制UI
绘制完成后，执行一次所有收集到的effect，并收集 cleanup 函数 严格模式将执行2次（setup → cleanup → setup）
Effect 在组件挂载时运行了两次
官网是这样说的 Effect 在组件挂载时运行了两次
在开发模式的严格模式下，为了提高程序的稳定性，从而调用两次
setup来放大错误
更新
当props已经更新时或者标记的state进行更新时
react 会执行 cleanup
当遇到hooks时：
✨ useState
更新State，将返回新的
✨ useEffect
收集所有的依赖的effect
最后返回vDom
由react-dom库来对比两次的vDom，更新UI
更新完成后，执行 effect，并收集 cleanup 函数
卸载
执行所有cleanup
特殊的更新 (key)
当父组件对子组件定义了key时，并且当key更新时
组件将被卸载并重新初始化
这也是重要的特性，可以借助改变
key来进行重新加载组件
可以通过以下来查看组件执行顺序
