React 性能优化策略

问题

React 应用中如何避免不必要的重新渲染？常用的优化手段有哪些？

解答

1. PureComponent（类组件）

PureComponent 自动对 props 和 state 进行浅比较，避免不必要的渲染。

import React, { PureComponent, Component } from 'react';

// 普通组件：父组件更新时总会重新渲染
class RegularChild extends Component {
  render() {
    console.log('RegularChild 渲染');
    return <div>{this.props.name}</div>;
  }
}

// PureComponent：props 浅比较相等时跳过渲染
class PureChild extends PureComponent {
  render() {
    console.log('PureChild 渲染');
    return <div>{this.props.name}</div>;
  }
}

class Parent extends Component {
  state = { count: 0, name: 'Tom' };

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Count: {this.state.count}
        </button>
        {/* 点击按钮时，RegularChild 会重新渲染，PureChild 不会 */}
        <RegularChild name={this.state.name} />
        <PureChild name={this.state.name} />
      </div>
    );
  }
}

2. React.memo（函数组件）

React.memo 是函数组件版本的 PureComponent。

import React, { useState, memo } from 'react';

// 普通函数组件
const RegularChild = ({ name }) => {
  console.log('RegularChild 渲染');
  return <div>{name}</div>;
};

// memo 包裹：props 不变时跳过渲染
const MemoChild = memo(({ name }) => {
  console.log('MemoChild 渲染');
  return <div>{name}</div>;
});

// 自定义比较函数
const MemoChildCustom = memo(
  ({ user }) => {
    console.log('MemoChildCustom 渲染');
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => {
    // 返回 true 表示 props 相等，跳过渲染
    return prevProps.user.id === nextProps.user.id;
  }
);

function Parent() {
  const [count, setCount] = useState(0);
  const name = 'Tom';

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <RegularChild name={name} />
      <MemoChild name={name} />
    </div>
  );
}

3. useMemo（缓存计算结果）

useMemo 缓存计算结果，依赖不变时返回缓存值。

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

function ExpensiveList({ items, filter }) {
  // 没有 useMemo：每次渲染都重新计算
  // const filteredItems = items.filter(item => item.includes(filter));

  // 使用 useMemo：只在 items 或 filter 变化时重新计算
  const filteredItems = useMemo(() => {
    console.log('执行过滤计算');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

function App() {
  const [filter, setFilter] = useState('');
  const [count, setCount] = useState(0);
  const items = ['apple', 'banana', 'orange', 'grape'];

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      {/* 点击按钮不会触发过滤计算 */}
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <ExpensiveList items={items} filter={filter} />
    </div>
  );
}

4. useCallback（缓存函数引用）

useCallback 缓存函数引用，配合 memo 使用避免子组件重新渲染。

import React, { useState, useCallback, memo } from 'react';

// memo 包裹的子组件
const Button = memo(({ onClick, children }) => {
  console.log(`Button "${children}" 渲染`);
  return <button onClick={onClick}>{children}</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 没有 useCallback：每次渲染创建新函数，Button 总会重新渲染
  // const handleClick = () => setCount(count + 1);

  // 使用 useCallback：函数引用稳定，Button 不会因为 text 变化而重新渲染
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <p>Count: {count}</p>
      <Button onClick={handleClick}>增加</Button>
    </div>
  );
}

5. 避免内联函数和对象

内联函数和对象每次渲染都会创建新引用，导致子组件重新渲染。

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

const Child = memo(({ style, onClick }) => {
  console.log('Child 渲染');
  return <div style={style} onClick={onClick}>Child</div>;
});

// ❌ 错误示范
function BadParent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      {/* 每次渲染都创建新的 style 对象和 onClick 函数 */}
      <Child
        style={{ color: 'red' }}
        onClick={() => console.log('clicked')}
      />
    </div>
  );
}

// ✅ 正确示范
function GoodParent() {
  const [count, setCount] = useState(0);

  // 缓存对象
  const style = useMemo(() => ({ color: 'red' }), []);
  // 缓存函数
  const handleClick = useCallback(() => console.log('clicked'), []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <Child style={style} onClick={handleClick} />
    </div>
  );
}

完整示例

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

// 列表项组件
const ListItem = memo(({ item, onRemove }) => {
  console.log(`ListItem ${item.id} 渲染`);
  return (
    <li>
      {item.text}
      <button onClick={() => onRemove(item.id)}>删除</button>
    </li>
  );
});

// 列表组件
function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习 React' },
    { id: 2, text: '写代码' },
  ]);
  const [input, setInput] = useState('');
  const [filter, setFilter] = useState('');

  // 缓存删除函数
  const handleRemove = useCallback((id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }, []);

  // 缓存添加函数
  const handleAdd = useCallback(() => {
    if (!input.trim()) return;
    setTodos(prev => [...prev, { id: Date.now(), text: input }]);
    setInput('');
  }, [input]);

  // 缓存过滤结果
  const filteredTodos = useMemo(() => {
    return todos.filter(todo => todo.text.includes(filter));
  }, [todos, filter]);

  return (
    <div>
      <input
        value={input}
        onChange={e => setInput(e.target.value)}
        placeholder="添加待办"
      />
      <button onClick={handleAdd}>添加</button>
      <input
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="搜索"
      />
      <ul>
        {filteredTodos.map(item => (
          <ListItem key={item.id} item={item} onRemove={handleRemove} />
        ))}
      </ul>
    </div>
  );
}

关键点

• PureComponent 用于类组件，自动浅比较 props 和 state
• React.memo 用于函数组件，可传入自定义比较函数
• useMemo 缓存计算结果，避免重复计算
• useCallback 缓存函数引用，配合 memo 使用才有意义
• 避免内联 函数和对象作为 props，否则每次渲染都是新引用
• 不要过度优化，先用 React DevTools Profiler 定位性能瓶颈