React 基础面试题, React 中 Component 和 PureComponent 有什么区别?
React 基础面试题, React 中 Component 和 PureComponent 有什么区别?
QA
Step 1
Q:: React 中 Component 和 PureComponent 有什么区别？
A:: React.Component 和 React.PureComponent 都是用于创建类组件的，但是它们在 shouldComponentUpdate 方法上存在差异。React.Component 的 shouldComponentUpdate 默认返回 true，即每次父组件的 state 或 props 改变时，子组件都会重新渲染。而 React.PureComponent 实现了一个浅比较的 shouldComponentUpdate 方法，当 state 或 props 的浅比较结果相等时，它不会触发重新渲染。这意味着 PureComponent 可以优化性能，减少不必要的渲染，尤其是在组件树较大时，但它只适用于 props 和 state 是简单对象或基本数据类型的情况。如果是复杂对象，浅比较可能会带来错误。
Step 2
Q:: 什么时候应该使用 PureComponent？
A:: PureComponent 适用于当组件的 props 和 state 都是简单且不变的值时，这样可以通过减少不必要的渲染来提升性能。如果组件的 props 和 state 包含复杂的对象或数组，且它们的内容可能会改变，应该小心使用 PureComponent，因为浅比较可能会导致不正确的结果。
Step 3
Q:: React 中如何避免不必要的渲染？
A:: 避免不必要渲染的方法包括：使用 React.PureComponent、使用 shouldComponentUpdate 手动控制渲染、使用 React.memo 对函数组件进行优化、在必要时使用 useMemo 或 useCallback 来缓存值或函数，以减少子组件的重新渲染。
Step 4
Q:: React 中如何实现性能优化？
A:: 性能优化的方法包括：1. 使用 React.PureComponent 或 React.memo 减少不必要的渲染；2. 使用 lazy 和 Suspense 进行懒加载组件；3. 使用代码分割（Code Splitting）来按需加载代码；4. 在合适的地方使用 useMemo 和 useCallback 来缓存计算值和函数；5. 使用虚拟列表（如 react-window）处理大量数据列表；6. 避免使用匿名函数和内联函数，因为它们在每次渲染时都会创建新的引用。