Question

我想对长长的列表中的选定元素应用不同的样式。我正在传递给React组件元素作为道具： currentId 和 selectedId 。在渲染功能中，我将两个ID进行比较并应用适当的样式。

单击列表中的任何元素时，我都会使用新选择的ID触发操作，列表中的所有元素都会重新呈现（因为 selectedId 属性确实发生了变化）。

如果列表中有1000个元素，而我单击了其中一个，那么最好只更新2个元素（新选择和取消选择的元素）而不是全部。

这些是在React中处理这种情况的更好方法吗？

更新：添加代码示例

列表组件：

const MyList = (props) => {
    const items = props.items;
    const selectedId = props.selectedId;
    return (
        <div>
            {items.map((item) => (
                <MyItem
                    currentId={item.id}
                    selectedId={selectedId}
                    key={item.id}
                    content={props.content}
                />
            ))}
        </div>
    );
};

项目组件：

const MyItem = (props) => {
  const isSelected = props.currentId === props.selectedId;
  return (
    <div className={isSelected ? 'selected-item' : ''}>
      <h1>{props.currentId}</h1>
    </div>
  );
};

Answer 1

您可以实现shouldComponentUpdate逻辑以防止组件重新呈现。通常，这是个坏主意（稍后会详细介绍），但它似乎确实适用于您的用例。通常，最好使用PureComponent来防止不必要的重新渲染。这样会实现shouldComponentUpdate逻辑，该逻辑将state和props进行比较，如果两者均未更改，则不会发生更新。

在没有看到您的代码的情况下，这是我对shouldComponentUpdate在您的上下文中的外观的最佳猜测：

shouldComponentUpdate(nextProps) {
  if(this.state.isSelected && this.state.id !== nextProps.selectedId) {
    return true;
  } else if (!this.state.isSelected && this.state.id === nextProps.selectedId) {
    return true;
  }
  return false;
}

请注意，这意味着不会重新呈现，除非shouldComponentUpdate返回true或您在该组件上调用this.forceUpdate()。如果调用this.setState()，则您的组件甚至都不会呈现，除非您添加了更具体的逻辑，以使shouldComponentUpdate在状态更改时返回true。这可能会导致难以调试的问题，其中您的UI无法反映应用程序状态的变化，但不会发生明显的错误。此行为不适用于子组件，因此，如果这些组件有子组件，它们仍将按预期方式重新渲染。如果决定实现shouldComponentUpdate，则可以通过声明nextState参数来添加逻辑以比较状态：

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.isSelected && this.state.id !== nextProps.selectedId) {
    return true;
  } else if (!this.state.isSelected && this.state.id === nextProps.selectedId) {
    return true;
  } else if (/*compare this.state to nextState */) { .... }
  return false;
}

实施自己的shouldComponentUpdate会很棘手，并且可能需要重组代码以获得最佳结果（例如，将isSelected变量传递给组件，而不是让这些组件决定是否选择它们可以使您轻松实现PureComponent）。祝你好运！

React中列表中的选定元素

1 个答案: