14 useLayoutEffect基础用法
useLayoutEffect概念解释
我们第九个要学习的Hook(钩子函数)是useLayoutEffect,他的作用是“勾住”挂载或重新渲染完成这2个组件生命周期函数。useLayoutEffect使用方法、所传参数和useEffect完全相同。
他们的不同点在于,你可以把useLayoutEffect等同于componentDidMount、componentDidUpdate,因为他们调用阶段是相同的。而useEffect是在componentDidMount、componentDidUpdate调用之后才会触发的。
也就是说,当组件所有DOM都渲染完成后,同步调用useLayoutEffect,然后再调用useEffect。
useLayoutEffect永远要比useEffect先触发完成。
那通常在useLayoutEffect阶段我们可以做什么呢?
答:在触发useLayoutEffect阶段时,页面全部DOM已经渲染完成,此时可以获取当前页面所有信息,包括页面显示布局等,你可以根据需求修改调整页面。
请注意,useLayoutEffect对页面的某些修改调整可能会触发组件重新渲染。如果是对DOM进行一些样式调整是不会触发重新渲染的,这点和useEffect是相同的。
在react官方文档中,明确表示只有在useEffect不能满足你组件需求的情况下,才应该考虑使用useLayoutEffect。 官方推荐优先使用useEffect。
请注意:如果是服务器渲染,无论useEffect还是useLayoutEffect 都无法在JS代码加载完成之前执行,因此都会收到错误警告。 服务器渲染时若想使用useEffect,解决方案不在本章中讨论。
让我们回到useLayoutEffect基础学习中。