React组件输入值变更引发全DOM重渲染性能问题求助

问题背景 #

组件包含inputText和students两个state：inputText用于跟踪输入框值，students数组用于映射渲染学生列表。每当inputText变化时，整个DOM会重渲染，包括与输入无关的学生列表。当列表超过1000条时，每次输入都会触发1000个列表项重渲染，导致输入反馈极慢，DOM空白2-3秒后才重新渲染列表。

解决方案 #

1. 拆分组件并使用React.memo缓存 #

将学生列表部分拆分为独立组件，通过React.memo包裹，确保仅当students props变化时才触发重渲染。

// 独立的学生列表组件
const StudentList = React.memo(({ students }) => {
  return (
    <ul>
      {students.map(student => (
        <li key={student.id}>{student.name}</li>
      ))}
    </ul>
  );
});

// 父组件中使用
function ParentComponent() {
  const [inputText, setInputText] = useState('');
  const [students, setStudents] = useState([]);

  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  return (
    <div>
      <input value={inputText} onChange={handleInputChange} />
      <StudentList students={students} />
    </div>
  );
}

2. 使用useMemo缓存列表渲染结果 #

在父组件中用useMemo缓存列表的JSX结构，仅当students变化时重新生成渲染内容。

function ParentComponent() {
  const [inputText, setInputText] = useState('');
  const [students, setStudents] = useState([]);

  // 缓存列表渲染结果
  const studentListJSX = useMemo(() => {
    return students.map(student => (
      <li key={student.id}>{student.name}</li>
    ));
  }, [students]);

  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  return (
    <div>
      <input value={inputText} onChange={handleInputChange} />
      <ul>{studentListJSX}</ul>
    </div>
  );
}

3. 防抖优化输入更新 #

通过防抖函数减少inputText的更新频率，避免每次输入字符都触发重渲染。

import { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

function ParentComponent() {
  const [inputText, setInputText] = useState('');
  const [students, setStudents] = useState([]);

  // 防抖处理输入更新
  const debouncedSetInputText = useCallback(
    debounce((text) => {
      setInputText(text);
    }, 300), // 300ms延迟，可根据需求调整
    []
  );

  const handleInputChange = (e) => {
    debouncedSetInputText(e.target.value);
  };

  return (
    <div>
      <input value={inputText} onChange={handleInputChange} />
      <ul>
        {students.map(student => (
          <li key={student.id}>{student.name}</li>
        ))}
      </ul>
    </div>
  );
}

4. 虚拟滚动渲染可见区域 #

使用虚拟滚动库（如react-window）只渲染当前可见区域的列表项，彻底解决大列表重渲染性能问题。

import { useState } from 'react';
import { FixedSizeList } from 'react-window';

function ParentComponent() {
  const [inputText, setInputText] = useState('');
  const [students, setStudents] = useState([]);

  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  // 渲染单个列表项
  const renderStudentRow = ({ index, style }) => {
    const student = students[index];
    return <div style={style} key={student.id}>{student.name}</div>;
  };

  return (
    <div>
      <input value={inputText} onChange={handleInputChange} />
      <FixedSizeList
        height={500} // 列表容器高度
        itemCount={students.length}
        itemSize={50} // 每个列表项高度
        width="100%"
      >
        {renderStudentRow}
      </FixedSizeList>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Aaqib Rasool