Preact列表子组件未正确更新问题排查求助

你遇到的这个问题，核心原因是在列表渲染<Person>组件时没有添加唯一的key属性，这是Preact（以及React）列表渲染中非常容易踩的坑。

为什么会出现这种现象？ #

Preact的虚拟DOM diff算法依赖key属性来识别列表中的每个元素：

• 当你没有显式指定key时，Preact会默认使用数组的索引作为隐式key。
• 当你筛选列表后，新列表的元素数量和原列表前N项一致时（比如筛选后剩2个元素，原列表前2个也是2个），Preact会直接复用原来的2个<Person>组件实例，只是尝试更新它们的person props。
• 但如果<Person>组件内部有自身状态，或者因为某些原因没有正确响应props更新（比如类组件的shouldComponentUpdate逻辑判断失误，或者函数组件没正确使用memo），就会导致组件显示的还是旧的内容；即使是纯展示组件，依赖索引作为key也会让diff逻辑出现错误匹配，最终渲染出不对的内容。

修复方案 #

只需要在map渲染<Person>时，给每个组件加上唯一的key即可。优先使用每个person对象的唯一标识（比如如果有id字段就用p.id），如果你的数据里name是唯一的，也可以用p.name：

render () {
  const {persons} = this.state
  return (
    <div>
      <SearchInput onInputChange={this.onSearchInput} placeHolder={'filter: name'} />
      {/* 这里添加唯一的key属性 */}
      {persons.map(p => <Person key={p.name} person={p} />)}
    </div>
  )
}

额外注意事项 #

• 永远不要用数组索引作为key，除非你的列表是完全静态的（不会排序、筛选、增删）。因为索引会随着列表内容的变化而改变，Preact还是会复用错误的组件实例。
• 确保key是每个元素的唯一标识，这样Preact才能准确判断哪些元素需要新增、删除或更新，保证渲染内容和数据一致。

内容的提问来源于stack exchange，提问作者Juan Ignacio Noli Villar