Question

我有一个列表的react组件，我们称之为List，它有一个名为items的状态，它是一个表单对象的数组：

{ id: String, name: String }

它的渲染功能类似于

render () {
    return (
        <ul>
          { items.map((item) => {
            return (
              <Item key={item.id} item={item} />
            );
          })}
        </ul>
    );
}

当然，物品也是反应成分。

所以现在，我的问题：让我们说，在某一点上，我知道数据发生了变化（当然只能改变名称），如何根据来自父级的密钥触发Item刷新？

到目前为止我找到了两个解决方案：

刷新整个州，但我不喜欢它，因为它似乎有点矫枉过正。
维护一个对子组件的引用数组，但我不喜欢它，因为它感觉就像浪费内存。

那么这种“反应性”的方式是什么？

Answer 1

如果items数组已更改，则调用Parent的呈现，因为键Item组件相同，因此不会重新创建组件，但会调用其componentWillReceiveProps函数并重新呈现Item组件。

您可以做的优化是将Item组件创建为Pure组件，您可以通过扩展React.PureComponent来完成。 React.PureComponent’s shouldComponentUpdate()只是浅浅地比较对象，所以如果道具没有改变，则不会调用对孩子的重新渲染。

根据DOCS：

如果你的React组件的render（）函数呈现相同的结果   给出相同的道具和状态，你可以使用React.PureComponent   在某些情况下性能提升。

React.PureComponent’s shouldComponentUpdate()只是浅薄的   比较对象。如果这些包含复杂的数据结构，它可能会   为更深层次的差异产生假阴性。只是扩展   PureComponent当你期望拥有简单的道具和状态，或使用时   {1}}当您知道深层数据结构发生了变化时。要么，   考虑使用不可变对象来促进快速比较   嵌套数据。

此外，forceUpdate() React.PureComponent’s会跳过   支持整个组件子树的更新。确保所有的   儿童成分也是“纯粹的”。

Answer 2

通过在React组件中实现shouldComponentUpdate(nextProps, newState)，您可以计算组件是否需要更新。因此，如果您发送一个全新的对象，这应该已经在其默认实现中触发（它们不进行深度比较），但如果属性input.name被更改，那么它将不会检测到这一点。所以你可以这样自己实现：

shouldComponentUpdate(nextProps, newState) {
    return this.props.name === nextProps.name; // use === to compare types too!
}

现在我对JavaScript有点生疏（我更喜欢TypeScript），所以我不确定这是否是比较字符串的正确方法。

Answer 3

使用shouldComponentUpdate（）方法，您可以指定组件是否应根据当前道具和提供的新道具进行更新：

shouldComponentUpdate(nextProps){
    return this.props.item.name !== nextProps.item.name; 
}

这是一个带有演示的JsFiddle：https://jsfiddle.net/Vorcan/Lakj6qwb/

通常，您必须使用Object.assign()等内容创建新的对象实例。

除了文档之外，另一个值得检查的好资源是shouldComponentUpdate https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/using_should_component_update.html

Answer 4

一个字：Redux。这是您开始感觉需要它的地方。您可以将商品订阅到商店并发送名称更改操作，该操作将更新相应的商品。请参阅the official docs

仅刷新从父项更改的组件

4 个答案: