Question

我基本上理解了键的用途：我们需要能够识别子列表中的更改。

我遇到的问题是信息流，并保持我的商店中的状态与子组件状态之间的同步性。

例如，假设我有<CustomTextInput>的列表，这听起来就像它。一些容器内部有文本输入。其中许多都存储在一些<CustomTextInputList>元素中。

列表中CustomTextInput的数量可以更改，可以添加和减去它们。我有一个带增量计数器的工厂，每次插入CustomTextInput时都会发出新的密钥，无论它放在何处。

我有一个CustomTextInputModel类型填充我的商店。每当我更改其中一个输入中的值时，它需要调用一个回调函数来调度我的商店中的操作。但是，我如何知道要修改哪一个，以及如何确保整个列表不会因更改单个实例而重新渲染，因为整个商店的状态正在重新创建？我是否需要在每个CustomTextInput中存储对某些模型ID的引用？这应该是关键吗？

很多人，我对此非常陌生：）

Answer 1

但是，我如何知道要修改哪一个，以及如何确保整个列表不会因更改单个实例而重新呈现，因为正在重新创建整个商店的状态？

如果你的组件绑定到redux商店中的对象列表，那么它将重新呈现整个列表，因为父级将获得新的道具。但是有几种方法可以避免重新渲染。

请注意，这是一个非常高级的帖子，但希望它有所帮助。我发现this page有助于解释一种方法，通过让每个项目连接到redux存储并通过一个通过prop传入的id来监听自身，从而使react-redux应用程序在渲染大型列表时更加高效。

编辑这是另一篇很好的文章，说明了这一点：https://medium.com/devtravel/optimizing-react-redux-store-for-high-performance-updates-3ae6f7f1e4c1#.3ltrwmn3z

Reducer内部：

function items(state = {}, action) {
  switch (action.type) {
    case 'MARK':
      const item = state[action.id];
      return {
        ...state,
        [action.id]: {...item, marked: !item.marked}
      };
    default: return state;
  }
}

function ids(state = [], action) {
  return state;
}

在列表容器中：

<div>
  {
    ids.map(id => {
      return <Item key={id} id={id} />;
    })
  }
</div>

// Returns an array of just ids, not whole objects
function mapStateToProps(state) {
  return {id: state.ids};
}

Item组件内部：

// Uses id that is passed from parent, returns the item at the index equal to the id
function mapStateToProps(state, props) {
  const { id } = props;
  const { items } = state;
  return {
    item: items[id],
  };
}

const markItem = (id) => ({type: 'MARK', id});
export default connect(
  mapStateToProps,
  {markItem}
)(Item);

我是否需要在每个CustomTextInput中存储对某个模型ID的引用？

是的，如果您想对该特定项目进行修改，则需要某种类型的密钥/ ID传递给redux操作。

这应该是关键吗？

在redux商店中引用某些内容的最常见方式是id。

密钥在react-redux应用程序中的作用以及管理动态组件的状态

1 个答案: