React-Redux 列表添加元素时所有项重渲染问题及优化方案问询

该重渲染行为是正常的，原因如下： #

• 你的reducer写法符合Redux不可变更新的要求，每次新增元素都会返回一个全新的terminalList数组引用，连接该状态的列表父组件会检测到props/state变化，默认触发重渲染。
• React默认的更新逻辑是：父组件重渲染时，所有子组件无论props是否变化，都会触发重渲染，所以所有列表项都会跟着更新。

无需手动写shouldComponentUpdate的优化方案： #

1. 列表项组件内置浅层比对能力 #

• 如果是函数组件，直接用React.memo包裹列表项组件即可，它会自动对props做浅层比对，只要传入列表项的属性引用没有变化，就会跳过重渲染。
• 如果是类组件，让列表项继承React.PureComponent，效果和React.memo一致，不需要额外写更新拦截逻辑。

注意：如果要给列表项传递回调函数、动态生成的对象类型属性，需要分别用useCallback、useMemo包裹，保证属性引用稳定，否则浅层比对会失效。

2. 保证列表渲染的key属性正确 #

渲染列表时，每个项的key必须绑定业务唯一标识（比如终端id），禁止用数组下标作为key。正确的key可以让React的Diff算法精准识别新增的元素，只会挂载新项，不会改动原有项的DOM，进一步降低更新开销。

3. 优化状态选择逻辑 #

如果使用react-redux，推荐配合reselect库的createSelector做缓存：

• 仅把单个列表项需要的字段提取出来传递，不要把整个列表、或者和列表项无关的状态传给子组件
• 使用useSelector时，也可以给第二个参数传入浅层比对函数shallowEqual，避免引用变化导致的不必要更新。

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