React性能优化

迫于dva4年没更新,把老项目切换成zustand,用起来真的简单,完美支持typescript,但是换完之后真的好卡…能感觉出来的那种卡

Hooks

useEffect,useMemo,useCallback 这几个hooks全用上了,还是有点卡…

控制台打开网络请求,也不慢啊😥

React DevTools

这个时候可以使用React DevTools来查看性能

React DevTools是一个浏览器插件,可以查看React组件的层级结构,状态和性能

React DevTools的Profiler功能可以帮助我们找到性能瓶颈,首先右上角设置里勾选 Highlight updates when components render. 这样当组件更新渲染时候会高亮显示,进行了一下比较卡的操作,发现组件一直在rerender

然后点击Start profiling进行性能检测,进行了一下比较卡的操作,点击Stop profiling,等一会就会自动刷新性能报告,有一个Flamegraph的图表,可以看到每个组件的渲染时间,找到耗时的组件,进行优化,还有一个Ranked chart可以看到每个组件的更新次数,找到更新频繁的组件,进行优化

why-did-you-render vs useWhyDidYouUpdate

why-did-you-render 是一个React组件更新检测工具,可以帮助我们找到不必要的组件更新,安装后在入口文件引入即可,有些项目可能配置起来比较麻烦

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

打开控制台,可以看到组件名,以及更新原因

useWhyDidYouUpdate是aHooks的组件更新检测hook,这个hook必须要自己去手动设置观测数据才行,不过0配置,用起来比较简单,但是有可能你只观测了A,实际上B才是问题所在,这样就会漏掉问题

优化

最后发现是因为

const store = useAppStore()
//这么写是不对的,appstore里任意一项数据变化都会导致组件更新

改成

const name = useAppStore(state => state.name)
//只用了一个name还好说,万一用了多个,就要写多个useAppStore,这个时候可以使用useShallow

const [name,setName,age,setAge] = useAppStore(useShallow(state => [state.name,state.setName,state.age,state.setAge]))

代码笔记

Hooks

React DevTools

why-did-you-render vs useWhyDidYouUpdate

优化