起因
学习react,在做项目的时候出现了很多问题,现在在这篇文章中进行总结和思考,方便我以后的学习。
问题
基础的问题
react的更新问题
react的更新问题,react的更新会重新执行react函数组件方法本身,并且子组件也会一起更新。
解决办法:导出组件的时候,使用React.memo包裹组件,这样组件的更新只有本组件更新后才会使该组件更新。
useCallback和useMemo的滥用
因为react的更新问题,每次页面进行了更新,其中的方法也会重新进行执行。有的时候会导致useCallback和useMemo的滥用,导致性能问题。
解决办法:当一些对象是固定不变的,将他们放在组件的外面。当给子组件的对象是和组件数据有关的,也就是做一个计算属性采用useMemo()。
state闭包,使得数据拿不到
需要在useEffect,useCallback,useMemo中的后面添加上依赖项。
其他优化的问题
useState,useRef和useEffect的使用
当使用了useState会使视图发生改变,但是不能拿到当前的值,要从useEffect中才能拿到。
所以建议是当你这个数据不想让它在视图中展示出来或者说没有必要的话,就可以使用useRef, 当想要视图发生改变的时候,可以使用useState。
推荐的方法:采用副作用方法。通过setxxx来修改数据,通过useEffect来进行监听这个数据的变化。
最后
如果还有其他的,我会继续补充的,发现使用这个react真的和vue感觉上差别很多,vue上面这些性能优化都不需要我们去考虑,但是react确实需要我们手动去干涉的。