type
status
date
slug
summary
tags
category
icon
password
translate
函数组件渲染流程图
在
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来进行重新加载组件
可以通过以下来查看组件执行顺序