React 进阶面试题, 在 React 中,如何避免不必要的 render 被触发?
React 进阶面试题, 在 React 中,如何避免不必要的 render 被触发?
QA
Step 1
Q:: 在 React 中，如何避免不必要的 render 被触发？
A:: 在 React 中，避免不必要的 render 是提高性能的关键。可以通过以下方法来避免：
1. shouldComponentUpdate：对于类组件，使用 shouldComponentUpdate 方法来决定组件是否需要重新渲染。
2. **React.memo**：对于函数组件，使用 React.memo 高阶组件，它会对比前后两次的 props，如果相同则跳过重新渲染。
3. useMemo 和 useCallback：使用 useMemo 和 useCallback 来缓存计算结果或函数，从而避免因引用变化导致的重新渲染。
4. PureComponent：使用 PureComponent，它会浅比较组件的 props 和 state，仅在检测到变化时才会重新渲染。
5. Key Prop 的使用：确保列表渲染中每个子元素都有一个唯一的 key，避免因为 key 的问题导致不必要的 render。
Step 2
Q:: 为什么要避免不必要的 render？
A:: 避免不必要的 render 可以显著提高应用的性能，特别是在大型应用中，每一次不必要的渲染都会消耗资源，导致页面的响应时间变长，用户体验下降。此外，减少 render 还可以减轻 React 渲染调度的负担，使得应用在复杂场景下仍能保持流畅的交互。
Step 3
Q:: React.memo 和 shouldComponentUpdate 的区别是什么？
A:: React.memo 是一个高阶组件，用于优化函数组件的性能，通过对比前后 props 来决定是否重新渲染。shouldComponentUpdate 是类组件中的一个生命周期方法，用于控制组件是否应该重新渲染。两者都能帮助避免不必要的渲染，但作用的组件类型不同。React.memo 更适用于函数组件，而 shouldComponentUpdate 则用于类组件。