React 父组件状态更新时如何避免循环列表子组件全量重渲染

React默认渲染规则下，父组件触发状态更新时，会重新执行自身的渲染逻辑，默认连带触发所有嵌入在渲染循环里的子组件重渲染——哪怕子组件自身没有任何props变化。这种无差别重渲染在表格行数量较多时会带来明显的性能损耗。

• 第一步：给行子组件添加渲染隔离
  用React.memo高阶组件包裹表格行子组件，开启props浅比较逻辑：只要传入行组件的props前后没有变化，就直接跳过本次重渲染流程。
  注意要避免给所有行透传相同的大体积父组件状态：不要把整个选中状态集合、整个父组件的状态对象直接传给每一行，只给当前行传递它自身渲染需要的最小化props。比如仅传递isCurrentRowSelected这个布尔值，而不是完整的选中ID列表。
• 第二步：保证透传给行组件的事件引用稳定
  不要在渲染循环里直接写内联箭头函数作为行的事件回调，这类写法每次父组件渲染都会生成新的函数引用，会让React.memo的比较逻辑直接失效。
  改为将选中回调设计为引用稳定的通用函数，让每一行组件内部自行绑定自身的行ID，父组件只传递这一份不变的回调引用即可，避免每次渲染生成新的函数props。
• 第三步：切断非必要的上下文依赖
  不要让行组件直接消费父组件的全局渲染上下文、跨层级的非必要状态，所有行组件依赖的值都通过精准的props传递，确保只有行自身对应的选中状态变化时，才会触发该行的重渲染。

上述优化完成后，点击单行复选框触发父组件状态更新时，仅被操作的行因为自身选中状态的props值发生变化触发重渲染，其余行的props没有变化，会直接跳过重渲染流程，符合预期的渲染行为。

• 不要为了减少重渲染将选中状态完全下沉到每个行组件内部，会破坏父组件统一管控选中逻辑的能力，提升后续全选、批量操作的实现复杂度。
• 如果需要给行组件传递对象/数组类型的props，要用useMemo固定这些值的引用，不要在渲染过程中临时生成新的对象字面量，否则React.memo的浅比较会因为引用不一致失效。

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