项目中,遇到一个父组件给两个子组件传值时的渲染次数问题。
父组件设置状态条件,两个子组件切换时,传值、初始化数据并渲染render()一次,render中的函数也会运行。
(旧)生命周期
- useEffect钩子函数执行,会重新渲染render()两次
在一个子组件中,useEffect有加载的api,api会改变一些state状态,重新渲染render()。
即,useEffect的执行顺序是在浏览器渲染完成之后在进行执行!
- 参数:useEffect()有两个参数
useEffect(()=>{
one()
},[id,name])
第一个参数是要执行的函数,第二个参数是一个依赖项数组数组(根据需求第二个参数可选是否填写)。若有第二个参数且数组里的变量不为空,则变量有变化时执行副作用操作,无变化则不执行;有第二个参数但数组为空,则副作用仅在组件挂载和卸载时执行
(新)生命周期
这么多生命周期钩子,实际上总结起来只有三个过程:挂载、更新、卸载,挂载和卸载只会执行一次,更新会执行多次。