Question

我有以下结构的组件：

<List>

   <Item>
      <DeepList>

          <DeepItem>
              <input type="text" />
          <DeepItem>

          <DeepItem>
              <input type="text" />
          <DeepItem>

          // [More DeepItem...]
      </DeepList>
   </Item>

   <Item>
      <DeepList>

          <DeepItem>
              <input type="text" />
          <DeepItem>

          <DeepItem>
              <input type="text" />
          <DeepItem>

          // [More DeepItem...]
      </DeepList>
   </Item>

   // [More Item...]

</List>

我选择按照建议here展平我的数据，所以看起来像这样：

items: {
    "1": {
        id: 1,
        text: "texte item 1...."
        deepItems: [1, 2]
     },
     // [...]
},

deepItems: {
    "1": {
        id: 1,
        text: "texte deep item 1...."
     },
     // [...]
}

DeepList组件连接到商店的“deepItems”属性。

const DeepList = React.createClass({

getDeepItems: function() {

    return this.props.specificDeepItems
        .map(id => {
            return this.props.deepItems[id]
        })
        .map( (item, idx) => {
            return (
                <DeepItem
                    text    = { item.text }
                    id      = { item.id }
                    key     = { idx }
                />
            );
        });
},

render: function() {

    return (
        <div>
            { this.getDeepItems() }
        </div>
    );
}
});

const mapStateToProps = function(store) {

    return {
       deepItems: store.deepItems,
    };
};

export default connect(mapStateToProps)(SimpleTestDeepList);

specificDeepItems属性由父（Item）传递给它，它是Item的deepItems字段。

输入的值是深项的文本字段。当我输入此输入时，“更改”功能会发出操作以更新商店中相应DeepItem的文本字段。

这样可以工作，但每次我输入一个字符时，每个DeepItem不仅会被重新渲染，而且还会被重新渲染，而不仅仅是那些嵌套在同一个Item中的那个！

这是预期的行为还是我在这里做错了什么？这在表现上并不合适。

谢谢！

Answer 1

Here你可以详细阅读你的问题。我会试着给你一个快速回答：

所有组件都可以重新渲染。是的，使用DOM的操作很慢，但React使用虚拟DOM，这就是当组件的道具或状态发生变化时，React通过构造新的虚拟DOM并将其与旧虚拟DOM进行比较来确定是否需要实际的DOM更新。只有在它们不相等的情况下，React才会协调DOM，尽可能少地应用突变。

Answer 2

这是一个快速的事情，你可以做，这也将提高性能，

创建列表项组件并通过它呈现每个项目。
在列表项组件中添加组件更新，因此只有在更改道具时才会更新。

Redux：仅更新嵌套列表中的一个项目

2 个答案: