避免在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的封装（实际上有几个具有不同功能的孩子，甚至更糟）。
• 我可以在f中应用Child，但随后它会重新应用于所有旧值。

获得合理的抽象和性能的正确方法是什么？是否有更明确的流类似于附加到列表？

Answer 1

1）制作儿童pure，以便它只在道具改变时重新渲染。

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

3）将“f”移动到Child的渲染功能中。