面试题答案
一键面试1. useMemo Hook与代码分割、懒加载策略的权衡
- 初始化渲染性能：
- useMemo：适用于减少组件在每次渲染时的昂贵计算，例如复杂数据的处理。如果某些计算结果在组件多次渲染中不会改变，就可以使用useMemo缓存该计算结果。例如在一个显示大数据表格的组件中，计算表格的合计值可以使用useMemo，避免每次渲染都重新计算。
- 代码分割：在应用初始加载时，通过代码分割（如
React.lazy和Suspense）可以将大的代码块分割成小的部分，只在需要时加载，从而减少初始加载的代码量，提升应用的首次渲染速度。比如一个大型电商应用，商品详情页可能包含许多复杂功能，但用户并非一开始就会访问商品详情，这时就可以对商品详情页进行代码分割。 - 权衡：在应用启动阶段，优先考虑代码分割来减少初始加载体积。而对于组件内部已经加载进来的代码中存在的昂贵计算，使用useMemo优化。例如在一个单页应用中，初始页面包含多个组件，先对不立即需要的组件代码进行分割，在已加载的组件内对复杂计算使用useMemo。
- 交互性能：
- useMemo：当组件因props或state变化而重新渲染时，useMemo可确保依赖不变时不重复执行昂贵操作，提升交互响应速度。例如在一个搜索框组件中，搜索结果的过滤计算使用useMemo，只有当搜索词或数据源变化时才重新计算。
- 懒加载：在用户交互过程中，如点击按钮或滚动到某个位置时，懒加载相关资源（如图片、组件等）可以避免一次性加载过多资源，提升交互体验。比如在一个图片列表页面，使用懒加载，当图片滚动到视口内才加载图片。
- 权衡：对于因用户交互频繁导致组件重新渲染的场景，useMemo更侧重于优化组件内部计算。而懒加载则关注资源的按需加载，避免不必要的资源消耗。例如在一个富文本编辑器中，用户输入时，useMemo优化文本处理计算，而对于编辑器可能加载的外部插件，采用懒加载在需要时加载。
2. 可能出现的冲突及解决方案
- 冲突：
- useMemo与代码分割冲突：代码分割可能导致useMemo依赖的模块在分割代码块中，使得useMemo的依赖关系难以正确处理。例如某个组件使用useMemo计算依赖于一个分割代码块中的函数，当该函数变化时，useMemo可能无法正确捕获到变化，因为模块加载的时机和作用域问题。
- useMemo与懒加载冲突：如果在懒加载的组件中过度使用useMemo，可能导致缓存的数据在组件卸载后仍然占用内存，特别是当懒加载组件频繁加载和卸载时。例如一个懒加载的模态框组件，内部使用useMemo缓存了大量数据，每次关闭模态框（卸载组件）后，缓存数据没有及时释放。
- 解决方案：
- 针对useMemo与代码分割冲突：确保useMemo依赖的模块在主代码块或者在一个稳定加载的代码块中，如果依赖必须在分割代码块中，可以通过props传递依赖函数等方式，使得useMemo能够正确捕获依赖变化。例如将分割代码块中的函数通过props传递给使用useMemo的组件，这样useMemo依赖props的变化从而正确响应。
- 针对useMemo与懒加载冲突：在懒加载组件卸载时，手动清理useMemo缓存的数据。可以使用
useEffect的清理函数来实现，例如在懒加载组件内使用useEffect(() => { return () => { // 清理useMemo缓存数据的逻辑 }; }, [])，在组件卸载时清理useMemo缓存的数据，避免内存占用。