避免在 Reactjs 中更改状态时重新计算

Question

我有一个 React 组件Parent其状态是一个值列表，用户可以添加到该值列表中，这将调用this.setState((state,props) => {return {items : state.items.concat(newItem);}).

我有另一个组件Child它通过道具获取state.items，并希望显示每个项目。准备要显示的项目涉及一些相对昂贵的功能f应用于每个项目。如何避免申请过多的f？

• 我可以将应用f移动到Parent中，并维护itemsF，然后在每个新项目上执行items: state.items.concat(f(newItem))。这种方法确保f应用最少的次数，但破坏了Child的封装(实际上有几个具有不同功能的子项，这更糟(。
• 我可以在Child中应用f，但随后它会重新应用于所有旧值。

获得合理的抽象和性能的正确方法是什么？还有什么比附加到列表更明确的流吗？

Answer 1

1(使Child纯净，以便它仅在道具更改时重新渲染。

2( 确保已为列表中的所有子组件分配了唯一的引用。

3( 将"f"移动到 Child 的渲染函数中。