React 面试中最常被问到的问题
内容提要
优化React应用程序性能的方法：1.小心实现shouldComponentUpdate或React.memo来防止不必要的重新渲染。2.使用函数组件和Hooks。3.延迟加载组件，使用React.lazy进行动态导入。4.代码拆分，使用动态import()语句或类似Loadable Components的库。5.在列表中适当使用key属性。6.节流和防抖事件处理程序。7.优化图像和资源。8.避免内存泄漏。
延伸解读
性能优化需权衡场景
文章列出的八种方法并非都要用上，而是针对不同瓶颈。例如，React.memo 和 shouldComponentUpdate 适合阻止不必要的重渲染，但若组件本身渲染开销小，反而可能因比较 props 带来额外成本。延迟加载和代码拆分主要优化首屏加载，而节流防抖则针对高频事件。读者应根据实际性能问题选择，避免盲目套用。
函数组件与 Hooks 的性能优势
文章指出函数组件配合 Hooks 通常比类组件性能更好。这得益于函数组件更轻量，没有类实例的开销，且 Hooks 让逻辑复用更自然。但性能优势并非绝对，若在函数组件中频繁创建大对象或内联函数，仍可能引发子组件重渲染。因此，结合 React.memo 和 useCallback 等工具才能发挥最佳效果。
内存泄漏的预防要点
文章强调在 useEffect 的清理函数中清理订阅和定时器，这是避免内存泄漏的关键。在 React 应用中，组件卸载后若未取消事件监听、定时器或异步请求，可能导致状态更新到已卸载组件，引发警告和内存问题。养成在 useEffect 中返回清理函数的习惯，能有效提升应用稳定性。
Q&A
如何防止React组件的不必要重新渲染？
可以实现shouldComponentUpdate或使用React.memo来比较props或状态，从而防止不必要的重新渲染。
使用函数组件和Hooks有什么性能优势？
函数组件与Hooks通常比类组件性能更好，因为它们减少了复杂性和内存占用。
什么是React.lazy，如何使用它？
React.lazy用于动态导入不立即需要的组件，从而实现延迟加载，减少初始加载时间。
代码拆分的好处是什么？
代码拆分可以将代码分成更小的块，确保用户只下载当前视图所需的内容，从而提高加载效率。
在列表中使用key属性有什么重要性？
确保每个列表项有唯一且一致的key属性，可以提高重新渲染的效率。
如何优化高频率更新的事件处理程序？
可以使用节流和防抖技术来优化如滚动、输入或窗口调整大小等高频率更新的事件。
