React 组件如何优化性能？（React性能优化的手段有哪些？）

问题解析

面试官考察点：

是否了解 React 的渲染机制
是否掌握常见的性能优化手段
是否能在实际项目中应用优化策略
对 React 原理的理解深度

核心概念

React 凭借 Virtual DOM 和 Diff 算法拥有高效的性能，但在某些业务场景下，性能问题依然会困扰开发者。性能优化的核心目标是避免不必要的渲染，减少 DOM 操作和计算开销。

渲染浪费的场景

当父组件发生渲染时，默认情况下所有子组件都会重新渲染，即使子组件的 props 和 state 没有变化。这种不必要的渲染会造成性能浪费。

详细解答

1. 避免不必要的 render

shouldComponentUpdate

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 对比 props 和 state，决定是否重新渲染
    if (this.props.value === nextProps.value) {
      return false; // 不重新渲染
    }
    return true; // 重新渲染
  }

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

PureComponent

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log('render');
    return <div>{this.props.value}</div>;
  }
}

// PureComponent 内部实现了 shouldComponentUpdate
// 对 props 和 state 进行浅比较

React.memo（函数组件）

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent({ value }) {
  console.log('render');
  return <div>{value}</div>;
});

// 支持自定义比较函数
const MyComponent2 = memo(
  function MyComponent({ value }) {
    return <div>{value}</div>;
  },
  (prevProps, nextProps) => {
    // 返回 true 表示不重新渲染
    return prevProps.value === nextProps.value;
  }
);

2. 使用 useMemo 和 useCallback

import React, { useMemo, useCallback } from 'react';

function ParentComponent({ data, onUpdate }) {
  // 缓存计算结果
  const processedData = useMemo(() => {
    return data.map(item => item * 2);
  }, [data]);

  // 缓存回调函数
  const handleClick = useCallback(() => {
    onUpdate(processedData);
  }, [onUpdate, processedData]);

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

3. 代码分割与懒加载

import React, { Suspense, lazy } from 'react';

// 懒加载组件
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

4. 虚拟列表优化长列表

import { FixedSizeList as List } from 'react-window';

function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

  return (
    <List
      height={500}
      itemCount={items.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </List>
  );
}

5. 事件绑定优化

// 不推荐：每次渲染都创建新函数
class BadExample extends React.Component {
  render() {
    return <button onClick={() => this.handleClick()}>Click</button>;
  }
}

// 推荐：使用类属性或 constructor 绑定
class GoodExample extends React.Component {
  handleClick = () => {
    console.log('clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// 函数组件推荐
function FunctionExample() {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <button onClick={handleClick}>Click</button>;
}

6. 使用 React Fragments 避免额外标记

// 不推荐：多余的 div
function BadExample() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  );
}

// 推荐：使用 Fragment
function GoodExample() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

7. 使用 Immutable 数据

import { Map, fromJS } from 'immutable';

// 使用 Immutable 数据便于比较
const state = fromJS({
  user: { name: 'John', age: 30 }
});

// 修改数据返回新对象
const newState = state.setIn(['user', 'age'], 31);

// 快速比较
console.log(state === newState); // false
console.log(state.get('user') === newState.get('user')); // false

深入理解

浅比较原理

function shallowEqual(objA, objB) {
  if (objA === objB) return true;

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) return false;

  for (let i = 0; i < keysA.length; i++) {
    if (!objB.hasOwnProperty(keysA[i]) ||
        objA[keysA[i]] !== objB[keysA[i]]) {
      return false;
    }
  }

  return true;
}

React 渲染流程

触发阶段：setState 或 props 变化触发更新
调和阶段（Reconciliation）：构建 Virtual DOM 树，进行 Diff 比较
提交阶段（Commit）：将变化应用到真实 DOM

性能优化的关键在于减少调和阶段的工作量。

最佳实践

组件拆分：将大组件拆分为小组件，减少不必要的渲染范围
合理使用状态：将状态尽量靠近使用它的组件
避免在 render 中创建新对象/函数：使用 useMemo/useCallback
使用生产环境构建：开发模式包含额外的警告和检查
启用 React DevTools Profiler：分析性能瓶颈

// 状态提升 vs 状态下沉
// 不推荐：所有状态都在顶层
function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  return (
    <div>
      <Counter count={count} setCount={setCount} />
      <Form name={name} setName={setName} />
    </div>
  );
}

// 推荐：状态靠近使用它的组件
function App() {
  return (
    <div>
      <Counter />
      <Form />
    </div>
  );
}

面试要点

理解 React 的渲染机制：Virtual DOM、Diff 算法、调和过程
掌握多种优化手段：shouldComponentUpdate、PureComponent、React.memo、useMemo、useCallback
了解优化适用场景：不是所有场景都需要优化，过度优化反而增加代码复杂度
实际项目经验：能够举例说明在项目中遇到的性能问题及解决方案
性能分析工具：React DevTools Profiler、Chrome Performance

常见追问：

PureComponent 和 shouldComponentUpdate 有什么区别？
useMemo 和 useCallback 的区别是什么？
什么时候不需要使用 useMemo？
React.memo 和 PureComponent 的浅比较有什么局限？