react hooks项目关于页面初始化的思考

今天偶然间看到了一片文章讨论useEffect和useLayoutEffect之间的区别，两者主要区别在于，一个是同步渲染执行的，一个是在渲染后执行的。弊端也比较明显，同步执行会有几率阻塞渲染这样会导致页面比较卡顿。但是能够及时的拿到想要的布局和数据。渲染后执行，不会影响渲染。但是必须要等渲染后才能获取对应的数据，如果控制不当会出现获取的数据为undefined，然后导致报错。

借由此，想到自己有个项目中存在类似的问题，当时的解决方式是通过数据是否存在判断是否渲染对应页面。这样保证子页面一定会有父组件给的值。当今天看到这个文章的时候想着是不是可以修改一下项目的逻辑。把页面初始化定义一个函数，在渲染最开始的时候执行。这样由于渲染顺序在子组件前面，这样可以通过缓存或者传值的方式直接给子组件传值，避免了需要判断才能传值的窘态。

这有个弊端，这种只适合初始化页面所需要的数据，并不修改页面数据。因为如果初始化中涉及到修改了页面数据，那么页面会重新渲染。而页面重新渲染又会导致初始化继续执行，最终会陷入一个死循环。要注意避免这个。数据的修改可以防止到useEffect进行。