中等
技术面试0 次浏览

在 React 项目中,如何进行性能优化?请列举至少三种方法并简要说明。

微软中国前端工程师
React性能优化

答题要点

推荐答题框架:采用要点列举法,分别阐述不同的优化方法。关键要点:1. 使用 React.memo,它是一个高阶组件,用于包裹函数组件,对组件的 props 进行浅比较,如果 props 没有变化,就不会重新渲染组件,减少不必要的渲染。2. 避免内联函数的使用,内联函数每次渲染都会创建一个新的函数实例,导致子组件重新渲染。可以将函数提取到组件外部,或者使用 useCallback 钩子进行优化。3. 合理使用 shouldComponentUpdate 或 React.PureComponent,shouldComponentUpdate 是类组件的生命周期方法,可在其中手动控制是否重新渲染;React.PureComponent 会自动对 props 和 state 进行浅比较,决定是否重新渲染。4. 使用 React.lazy 和 Suspense 进行代码分割,对于大型项目,将代码分割成小块,按需加载,减少初始加载时间。示例话术:在 React 项目中,可以使用 React.memo 包裹组件避免不必要渲染;避免内联函数,使用 useCallback 优化;合理使用 shouldComponentUpdate 或 React.PureComponent 控制渲染;还可以用 React.lazy 和 Suspense 进行代码分割。