React列表全量重建、shouldComponentUpdate未触发原因及避免重渲染方案

这事儿核心原因是——React觉得这些列表项是完全新的组件实例，不是已有组件的更新，所以直接把旧组件卸载掉，重新挂载新的。而shouldComponentUpdate这个方法只有在组件已经存在、准备更新的时候才会触发，组件刚挂载的时候根本不会调用它！

常见的触发场景有这几种：

• key值不靠谱：React全靠key认组件身份。要是你用数组索引当key，列表增删项或者顺序一变，同一个key就对应不同内容了，React就以为是新组件；要是key有重复，React分不清谁是谁，也会把所有项重新创建一遍。
• 父组件传的列表数据引用乱变：比如父组件每次渲染都用map/filter生成全新的数组（不是复用原来的数组引用），不过这一般只会触发子组件的更新流程，除非再加上key失效的问题，才会导致重新挂载。
• 列表的父组件被强制重新挂载了：比如你的TaskList组件因为自身key变了，或者被放在条件渲染的新分支里导致重新挂载，那它下面的所有子组件肯定也会被重新创建。

结合你给的TaskList代码，咱们一步步来解决：

1. 先把TaskCard的key给盯死 #

首先确保task.id是每个任务唯一且不会变的标识——绝对不能用数组索引、临时生成的ID或者可能变的字段当key，这是React能复用列表项的基础。

2. 让TaskCard学会“偷懒” #

你说shouldComponentUpdate从来没被调用，那是因为组件被重新挂载了不是更新，但解决挂载问题后，得让子组件只在必要的时候更新：

• 如果TaskCard是类组件，直接让它继承React.PureComponent就行，它会自动对props和state做浅比较，没必要的更新直接跳过；
• 要是你想自己控制比较逻辑，就手动写shouldComponentUpdate，深度对比task的内容（注意深度对比有性能开销，复杂结构的话最好用Immutable数据或者在父组件缓存）：

class TaskCard extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 用lodash的isEqual深度对比task内容，而不是只比引用
    return !_.isEqual(this.props.task, nextProps.task);
  }
  // ...其他代码
}

3. 别让TaskList的props瞎变 #

你的TaskList接收loadMore当props，如果父组件每次渲染都新创建一个loadMore函数（比如直接写loadMore={() => this.handleLoadMore()}），会导致TaskList的props变化，触发它重新渲染。可以这么优化：

• 要是父组件是类组件，就在构造函数里提前绑定loadMore函数，保证引用不变：

  class ParentComponent extends React.Component {
    constructor(props) {
      super(props);
      // 提前绑定，以后每次渲染都是同一个引用
      this.loadMore = this.loadMore.bind(this);
    }
    loadMore() {
      // 加载更多的逻辑
    }
    render() {
      return <TaskList tasks={this.state.tasks} loadMore={this.loadMore} />;
    }
  }
  

• 要是父组件是函数组件，就用useCallback缓存这个函数。

4. 缓存计算后的tasks（如果有的话） #

如果tasks是父组件经过筛选、转换得到的数组，建议用缓存避免每次都生成新引用。比如函数组件用useMemo，类组件可以在shouldComponentUpdate里对比原数据，只有原数据变了才重新计算。举个函数组件的例子：

const filteredTasks = React.useMemo(() => {
  return allTasks.filter(task => task.status === 'active');
}, [allTasks]);

这样只有allTasks变了，才会生成新的filteredTasks，不会让TaskList白忙活。

5. 确保TaskList本身没被强制重新挂载 #

检查父组件里TaskList的用法：别把TaskList定义在父组件的render函数里面（会每次生成新的组件类），也别给TaskList加不稳定的key（比如随渲染变化的值）。

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