React输入变更时阻止子组件重渲染问题解决方案

1. 用React.memo包裹子组件阻止不必要重渲染 #

你遇到的核心问题是：父组件input状态更新时，子组件会随父组件强制重渲染（即便resultlist完全没变化）。给子组件套一层React.memo，它会对组件的props做浅比较，只有当resultlist的引用真正改变（也就是搜索完成更新数据时），子组件才会重新渲染。

修改子组件代码：

import { memo } from 'react';

const Child = memo(({ resultlist }) => {
  return <>
    {resultlist.map((element, index) => <div key={index}>{element}</div>)}
  </>
});

注意：给列表元素加上唯一key，避免React的列表渲染警告与性能损耗。

2. 纠正useMemo的使用方式 #

你之前用useMemo处理resultlist无效，是因为用错了场景。useMemo用于缓存计算结果，而你需要的是缓存组件的渲染结果（这正是React.memo的作用）。如果一定要用useMemo，应该在父组件中缓存子组件的渲染实例：

return <>
  <input value={input} onChange={(e) => setinput(e.target.value)} />
  <button onClick={fetchResult}>搜索</button>
  {useMemo(() => <Child resultlist={resultlist} />, [resultlist])}
</>

不过这种写法不如直接给子组件加React.memo优雅，推荐优先使用前者。

3. 虚拟滚动解决大量DOM渲染卡顿 #

1万+条数据直接渲染成DOM本身就会导致页面卡顿——这是DOM数量过载的问题，即便阻止了重渲染，首次渲染也会很慢。用虚拟滚动只渲染当前可视区域内的条目，能把DOM数量从1万+压缩到几十条，从根本上解决渲染性能问题。以react-window为例：

修改子组件代码：

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

const Child = memo(({ resultlist }) => {
  const Row = ({ index, style }) => (
    <div style={style}>{resultlist[index]}</div>
  );

  return (
    <List
      height={400} // 可视区域高度
      itemCount={resultlist.length}
      itemSize={30} // 单条条目高度
      width="100%"
    >
      {Row}
    </List>
  );
});

4. 拆分组件隔离重渲染范围 #

把输入框和搜索按钮拆成独立组件，让输入状态的更新只影响自身，不触发整个父组件重渲染：

const SearchBar = ({ onSearch }) => {
  const [input, setInput] = useState('');
  return (
    <>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={() => onSearch(input)}>搜索</button>
    </>
  );
};

// 父组件中使用
const Comp1 = () => {
  const [resultlist, setresultlist] = useState([]);

  const fetchResult = (inputValue) => {
    fetch(`some url?keyword=${inputValue}`)
      .then(res => res.json())
      .then(data => setresultlist(data));
  };

  return <>
    <SearchBar onSearch={fetchResult} />
    <Child resultlist={resultlist} />
  </>
};

这样输入框的状态变化只会让SearchBar组件重渲染，父组件不会因输入操作触发重渲染，子组件自然也不会被牵连。

内容的提问来源于stack exchange，提问作者d.s