面试题：React动态切换组件条件渲染中的性能优化

性能问题理解

频繁创建销毁组件：每次条件渲染切换组件时，React会卸载旧组件并创建新组件。这意味着组件的生命周期方法（如componentWillUnmount和constructor）会被频繁调用，这会带来额外的计算开销，特别是在组件较为复杂，有较多初始化逻辑或清理逻辑时。
重新渲染开销：即使是简单的组件，React也需要为新组件创建虚拟DOM树，与旧的虚拟DOM树进行对比（diff算法），并将差异应用到真实DOM上。如果这种切换频繁发生，会导致大量不必要的虚拟DOM对比和真实DOM操作，降低应用性能。

优化手段

使用React.memo
- 原理：React.memo是一个高阶组件，它对函数式组件进行浅比较优化。当组件的props没有变化时，React.memo会阻止组件重新渲染。
- 使用示例：

import React from'react';

const MyComponent = React.memo((props) => {
    return <div>{props.value}</div>;
});

export default MyComponent;

- **注意事项**：`React.memo`仅对props进行浅比较。如果props是复杂对象或数组，即使内部数据变化但引用未变，组件也不会重新渲染。此时可能需要使用自定义比较函数，例如：

import React from'react';

const areEqual = (prevProps, nextProps) => {
    return prevProps.value === nextProps.value;
};

const MyComponent = React.memo((props) => {
    return <div>{props.value}</div>;
}, areEqual);

export default MyComponent;

shouldComponentUpdate（类组件）
- 原理：在类组件中，shouldComponentUpdate方法用于控制组件是否应该重新渲染。该方法接收nextProps和nextState作为参数，返回一个布尔值。如果返回false，组件将不会重新渲染。
- 使用示例：

import React, { Component } from'react';

class MyComponent extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.value!== nextProps.value;
    }

    render() {
        return <div>{this.props.value}</div>;
    }
}

export default MyComponent;

- **注意事项**：需要谨慎编写`shouldComponentUpdate`逻辑，避免因错误判断导致组件更新不及时。同时，由于该方法在每次可能的更新时都会被调用，复杂的比较逻辑可能会带来性能开销，所以比较逻辑应尽量简洁高效。

3. 其他优化 - 状态提升：将频繁变化的状态提升到父组件，减少子组件因状态变化导致的不必要渲染。例如，如果多个子组件通过条件渲染依赖同一个状态，将该状态提升到父组件，在父组件统一管理，通过props传递给子组件。这样可以避免子组件因状态变化而频繁创建销毁。 - 使用Fragment：当条件渲染返回多个组件时，使用Fragment包裹，避免额外的DOM节点创建，减少虚拟DOM对比和真实DOM操作的开销。例如：

import React from'react';

const MyComponent = (props) => {
    return props.show? (
        <>
            <div>First part</div>
            <div>Second part</div>
        </>
    ) : null;
};

export default MyComponent;

星途面试题库

面试题：React动态切换组件条件渲染中的性能优化

知识考点

面试题答案

性能问题理解

优化手段