React的性能优化手段
3使用 React.memo()或PureComponent:使用 React.memo() 或 PureComponent 可以避免不必要的重新渲染,以提高性能。 4使用shouldComponentUpdate()生命周期方法:shouldComponentUpdate() 可以让你手动检查组件是否需要重新渲染,以避免不必要的重渲染。 5避免在render()方法内部执行昂贵的计算:render() 方法应该尽可能简单和快速。如果必须在 render() 方法中执行某些计算,则应该使用 memoization 技术进行缓存。 6使用 React.lazy() 和 Suspense:React.lazy() 和 Suspense 可以延迟组件的加载,以提高初始渲染的速度。 7减少不必要的状态更新:当状态更新时,React 会调用 render() 方法,这可能会导致不必要的重新渲染。因此,你应该尽可能减少不必要的状态更新。 8使用 React DevTools:React DevTools 可以帮助你分析你的组件的性能瓶颈,并提供有关组件渲染时间和内存使用情况的实时数据。 9虚拟化大型列表和表格:对于包含大量子元素的列表和表格,虚拟化技术可以提高性能和内存使用效率。 10使用适当的数据结构:使用适当的数据结构来存储和操作数据可以提高性能和内存使用效率,例如使用 Map 来存储键值对数据。 11避免使用过多的 HOC 和 Render Props:过多的高阶组件和渲染属性可能会导致组件层次结构复杂,从而降低性能。
若有收获,就点个赞吧