避免在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的渲染功能中。