面试题：React函数组件条件渲染下的性能优化

优化思路

减少不必要渲染：确定哪些状态变化真正影响组件渲染，避免因无关状态改变导致的不必要重新渲染。
拆分组件：将复杂的条件渲染逻辑拆分成多个小组件，每个小组件专注处理简单逻辑，这样能减少单个组件的复杂度，也便于针对性优化。
缓存计算结果：对于频繁计算且结果不随每次渲染变化的数据，进行缓存，避免重复计算。

技术手段

使用 React.memo：
- 对于函数组件，React.memo 是一个高阶组件，它会对组件的 props 进行浅比较。如果 props 没有变化，组件不会重新渲染。例如：

import React from'react';

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

export default MyComponent;

useCallback 和 useMemo：
- useCallback：用于缓存函数，当依赖项没有变化时，返回相同的函数引用。这在将函数作为 props 传递给子组件，且子组件依赖该函数引用进行 shouldComponentUpdate 判断时很有用。例如：

import React, { useCallback } from'react';

const ParentComponent = () => {
    const handleClick = useCallback(() => {
        // 点击处理逻辑
    }, []);

    return <ChildComponent onClick={handleClick} />;
};

const ChildComponent = React.memo((props) => {
    return <button onClick={props.onClick}>点击</button>;
});

export default ParentComponent;

- **useMemo**：用于缓存计算结果，只有当依赖项变化时才重新计算。比如在复杂条件渲染中有一些需要计算的数据：

import React, { useMemo } from'react';

const MyComponent = ({ a, b }) => {
    const result = useMemo(() => {
        // 复杂计算逻辑，如 a 和 b 的复杂运算
        return a + b;
    }, [a, b]);

    return <div>{result}</div>;
};

export default MyComponent;

状态管理优化：
- 如果状态管理使用 Redux 等，合理规划 state 结构，尽量让每个组件只订阅自己需要的状态部分。在 Redux 中可以使用 react-redux 的 connect 函数的第二个参数 mapStateToProps 进行精确的状态映射，或者使用 useSelector 钩子函数并配合 reselect 库来创建高效的选择器，缓存选择器的计算结果，只有当真正影响选择器输出的状态变化时才重新计算。
虚拟列表：如果渲染的数据量很大且频繁变化，使用虚拟列表技术，如 react - virtualized 或 react - window 库。这些库只渲染可见区域的列表项，极大减少渲染的 DOM 元素数量，提升性能。例如使用 react - virtualized 的 List 组件：

import React from'react';
import { List } from'react - virtualized';

const rowRenderer = ({ index, key, style }) => {
    return <div key={key} style={style}>Item {index}</div>;
};

const MyList = () => {
    const listData = Array.from({ length: 1000 }, (_, i) => i);
    return (
        <List
            height={400}
            rowCount={listData.length}
            rowHeight={50}
            rowRenderer={rowRenderer}
            width={300}
        />
    );
};

export default MyList;

星途面试题库

面试题：React函数组件条件渲染下的性能优化

知识考点

面试题答案

优化思路

技术手段