一、 单个tsx文件依赖改变时渲染顺序
1、useEffect简单情况
这是最简单的情况;每次组件render的时候,最先要明白的是useEffect第二个参数,一个依赖项的数组;分以下 3 * 2 种情况:
组件首次渲染 |
组件非首次渲染,在有state改变时渲染 | |
---|---|---|
useEffect无第二个参数 |
执行 |
执行 |
useEffect第二个参数是空数组 |
执行 |
不执行 |
useEffect第二个参数是非空数组 |
执行 |
改变的state在数组内 执行 否则 不执行 ; 注:改变采用浅比较,此处不深究比较原理;不建议传入引用类型作为依赖项,如果在useEffect中修改了引用类型,则会引发无限渲染的问题 |
注:useEffect中的回调函数不只是在组件销毁前调用,而是在每一轮的下一次render前也会调用,所以回调函数的执行逻辑同上表;
const Index1 = () => {
const [test, setTest] = useState(1)
console.log(1)
useEffect(() => {
console.log(4)
})
useEffect(() => {
console.log(5)
}, [])
useEffect(() => {
console.log(6)
}, [test])
console.log(2)
return (
<>
{console.log(3)}
<h1>这里是Index1</h1>
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
</>
)
}
首先就是不论什么时候渲染;均是从上往下执行代码;(此处重点讨论useEffect,不讨论同步、异步、宏任务和微任务;有兴趣可以阅读),
直到执行完return内的代码;最后回过头从上往下执行 每个useEffect内的代码;我们称之为一个渲染循环;打印顺序为:1、2、3、4、5、6;可以分批理解为1、2、3为挂载前执行,4、5、6为挂载后执行;
点击Button改变状态值,从上到下会依然打印 1、2、3、4、6;
需要注意的是,如果是在执行代码过程当中触发的state改变;则需要先执行完当前渲染循环;然后执行下一个渲染循环;以此类推;
const Index2 = () => {
const [test, setTest] = useState(1)
console.log(1)
useEffect(() => {
console.log(4)
return () => {
console.log(11)
}
})
useEffect(() => {
console.log(5)
const timer = setInterval(() => {
console.log('每秒打印一次')
}, 1000)
return () => {
console.log(12)
clearInterval(timer)
}
}, [])
useEffect(() => {
console.log(6)
return () => {
console.log(13)
}
}, [test])
console.log(2)
return (
<>
{console.log(3)}
<h1>这里是Index2</h1>
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
</>
)
}
2、useEffect回调执行逻辑
在Index1的基础上,我们加上useEffect的回调函数,其实回调不仅仅是在组件willunmount的时候执行那么简单;
当然对于上面的例子,组件卸载时,11、12、13会依次打印;
但其实 点击Button时;会依次打印1、2、3、11、13、4、6;也就是对于11、13 这2个回调而言,所在的useEffect再次render前会执行上次回调;12所在useEffect不会影响,故不会打印;
12所在的useEffect只会在组件卸载时候 执行回调;所以我们平时把清除定时器、清除onscroll等放在依赖为[]的useEffect内;
关于回调,其实在卸载组件之后不会立马执行,而是在即将挂载的组件挂载前和挂载后的中间执行;(这点不重要;感兴趣的读者可以下去探索)
二、 tsx文件嵌套tsx文件时渲染顺序
const Index = () => {
const [test, setTest] = useState(1)
console.log(1)
useEffect(() => {
console.log(4)
})
useEffect(() => {
console.log(5)
}, [])
useEffect(() => {
console.log(6)
}, [test])
console.log(2)
return (
<>
<Child1 />
{console.log(3)}
<h1>这里是Index</h1>
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
<hr />
</>
)
}
const Child1 = () => {
const [test, setTest] = useState(1)
console.log('child1', 1)
useEffect(() => {
console.log('child1', 4)
})
useEffect(() => {
console.log('child1', 5)
}, [])
useEffect(() => {
console.log('child1', 6)
}, [test])
console.log('child1', 2)
return (
<>
{console.log('child1', 3)}
<h1>这里是Child1</h1>
</>
)
}
1、初次渲染
执行顺序其实和第一大点(单个jsx(tsx)文件依赖改变时渲染顺序)一致;每执行一次渲染的时候,从组件最上方执行到最下方,依然是按照从上到下,执行完之后,再按照上表的6种情况执行useEffect内的代码;
这里 需要注意的是;若嵌套子组件;则Child属于当前组件的 return内容;执行完之后,才会执行当前组件的useEffect;也就是先打印2才会打印1;
所以上面代码打印顺序为:1、2、3、child1 1、child1 2、child1 3、child1 4、child1 5、child1 6、4、5、6;这里比较特殊的是:console.log(3)在<Child1 />下面;但是却先打印了3;
这里仅仅是嵌套一个Child1;读者可以脑补一个Child2和Child1平级;打印则是:1、2、3、child1 1、child1 2、child1 3、child2 1、child2 2、child2 3、child1 4、child1 5、child1 6、child2 4、child2 5、child2 6、4、5、6;
可以看出来要先把2个子组件的挂载前执行完毕才去执行useEffect;
2、state改变时
若是子组件state改变,和父组件无关,毋需讨论;
若是父组件state改变,打印顺序为:1、2、3、child1 1、child1 2、child1 3、child1 4、4、6;这里我们得到 在渲染过程中,只是把依赖数组内无关的过滤掉了;其余没有什么特别之处;
三、 tsx文件嵌套tsx文件时提升性能
1、利用React.memo()
从上面的分析学习我们不难发现;组件嵌套,初次渲染和父组件state改变时;无论子组件有没有变动,只要父组件render,所有的子组件都会重新render!
初次渲染无法提升性能;但是父组件state改变时,我们可以做一些事情;这就请出我们的另一个主要讨论对象:React.memo(); 简单代码如下:
const Index = () => {
return (
<>
<Child1 props1 = {'props1'} />
<Child2 props2 = {'props2'} />
</>
)
}
const Child1 = (props) => {
return (
<>
{console.log('child1')}
<h1>这里是Child1</h1>
<hr />
</>
)
}
export default Child1
const Child2 = (props) => {
return (
<>
{console.log('child2')}
<h1>这里是Child2</h1>
<hr />
</>
)
}
export default React.memo(Child2)
如上 Child1为参照;当index中state更新,新一轮render后,打印了child1,child2并未打印;证明memo起了作用;
index每一次render时候,child1无论如何都会每次render;这时候我们把重点放在child2上;我们将<Child2 /> 的props2变一下;变成非定值;而是和state相关的;Child1和Child2不变;如下:
const Index = () => {
const [test, setTest] = useState(1)
return (
<>
<Child1 props1 = {'props1'} />
<Child2 props2={test} />
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
</>
)
}
这时候我们发现 改变state时,child1和child2都打印了;证明2个子组件都刷新了;所以我们有了个初步的结论:当memo不传入第二个参数时,父组件render时;当props不改变;则该子组件不会render;props有改变时,则该子组件会render!
但是到这还没完;不禁猜想若 child2的props是个父组件本轮render不相关的state会怎么样;而非一个相关state;如下:
const Index = () => {
const [test, setTest] = useState(1)
const [definiteV, setDefiniteV] = useState(1)
return (
<>
<Child1 props1 = {'props1'} />
<Child2 props2={definiteV} />
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
</>
)
}
我们注意到此时;即便test改变;definiteV不改变(即便是definiteV是一个引用类型;但我们平时开发中,不建议state使用引用类型);Child2也不会重新render;所以我们可以有了提升性能第一个小措施:当子组件不论是否接收props,都用React.memo()包裹,会在无关props变化改变时减少子组件刷新次数;提升性能;
提到基本类型和引用类型;虽然在不相关state中是无差别的;但作为一个普通变量就不一样了;我们看一下如下代码:
const Index = () => {
const [test, setTest] = useState(1)
return (
<>
<Child1 props1 = {'props1'} />
<Child2 props2={[1,2,3]} />
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
</>
)
}
我们把child2的props2换成数组;再次改变test;发现child1和child2都打印了;证明child1和child2都重新render;我们猜想是因为数组的引用地址不一样,造成每次diff不同(memo的diff有点类似useEffect依赖的浅比较);
这显然是不符合我们预期的;我们就引出有一个hook;叫:useMemo;我们试着这样写:
2、结合使用useMemo和useCallback
const Index = () => {
const [test, setTest] = useState(1)
const memoValue = useMemo(() => [1, 2, 3], [])
return (
<>
<Child1 props1 = {'props1'} />
<Child2 props2={memoValue} />
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
</>
)
}
我们发现再次改变test;child2不打印了;证明useMemo起了效果;所以我们又有了一个提升性能的小措施:给子组件传的引用类型props最好可以结合使用useMemo以减少子组件不必要刷新,当然子组件需要结合使用React.memo;
还有一种特殊类型;也是我们工作中经常传给子组件的;那就是方法;
const Index = () => {
const [test, setTest] = useState(1)
const fn1 = () => {}
const fn2 = useCallback(() => {},[])
return (
<>
<Child1 props1 = {'props1'} />
<Child2 props2={fn1} />
<Button
onClick={() => {
setTest(v => v + 1)
}}
>
改变状态值
</Button>
</>
)
}
当改变test,父组件一轮render中;props2分别传入fn1和fn2的时候,传入fn1时候child2会重新render,传入fn2的时候则不会;useCallback和useMemo类似;区别是useMemo接收的是函数返回的值;而useCallback返回的即第一个参数,一个方法;
还有一个点值得我们注意:useMemo和useCallback都有第二个参数;一个依赖项数组;类似于useEffect的第二个参数;我们在文章前面分析了不少;此处不再赘述;
3、提一下React.memo()的第二个参数
当我们把Child2的代码稍作改动;加上memo()的第二个参数;如下:
const Child2 = (props) => {
return (
<>
{console.log('child2')}
<h1>这里是Child2</h1>
<hr />
</>
)
}
export default React.memo(Child2, (prev, next) => {
return false
})
在Child2每一轮render中; prev就是上一轮的props,next为下一轮即将接收的props;类似于React类组件的shouldComponentUpdate()类似;
我们可以人为的对比前后props,进行对组件(Child2)刷新控制;个人认为React.memo第二个参数实用性不大;经过上面的分析学习不难发现React已经帮我们做的很好了;根本不需要我们自己去控制;仅在特别情况下我们可以利用,大部分情况用不到;