如何有效地更新 React 中的组件数组

Question

我有一个按钮列表，每个按钮代表来自我的后端的一些数据。

现在，当我按下其中两个按钮时，我需要将它们以及中间的所有按钮标记为红色。

const Buttons = () => {
  const data = useState(getData())[0];
  const [pressedButtons, setPressedButtons] = useState([]);

  return ({data.map((buttonData, index) => 
    <Pressable
        style={{backgroundColor: pressedButtons.indexOf(index) > -1 ? "red" : "white"}}
        onPress={(index) => setPressedButtons(calculatePressedButtons(index))}>
      <Text>{buttonData.getText()}</Text>
    </Pressable>
  });
}

这种方法的问题是，当我需要更新单个按钮时，如果有很多这样的按钮（100+），整个组件都会重新呈现，这会导致按下按钮的反馈延迟。

我一直在寻找解决方案，但建议的解决方案（大部分带有备忘录）似乎不适用于我的情况。父级仍然遍历整个地图并重新计算每个按钮的道具。

如何有效地更新组件，以便对按钮点击的反馈是即时的？

Answer 1

我认为你应该让每个按钮成为一个单独的组件，并且每个按钮都在内部处理它的状态

Answer 2

使每个按钮成为一个单独的组件，并且每个按钮都在内部处理自己的状态。然后在每次按下按钮时将回调传递给按钮组件，除了更新按钮状态外，还会调用该回调。之后，您可以使用 forwardRef 和 useHandleImperative api 向父级公开您的 onclick 功能，并为父级中的每个按钮组件使用 ref，并在您在上一步中传递的回调中指定应该在按钮后更新哪些按钮已被点击。

如何有效地更新 React 中的组件数组

How to efficiently update array of components in React

javascript

reactjs

react-native