Reactjs 有什么区别？更新列表的两种方法

我有一个列表，我需要分为两个列表，这个列表可以有更新，因为我有很多过滤器

const List = ({list}) => {
  const [listA, setListA] = useState([]);
  const [listB, setListB] = useState([]);

  useEffect(() => {
    setListA(list.filter(x => x.a === 0));
    setListB(list.filter(x => x.a !== 0));
  }, [list]);

  return (
    ......
  )
}

VS

const List = ({list}) => {
  const listA = list.filter(x => x.a === 0);
  const listB = list.filter(x => x.a !== 0);

  return (
    ......
  )
}

---

不同之处在于，在第一种情况下，您最终以状态存储冗余信息。此外，当列表发生更改时，您将运行效果，设置

listA

和

listB

的状态，并以其他组件渲染结束

以codesandbox为例。您可以在控制台中看到，我们的组件渲染了两次：一次用于初始渲染，另一次用于新列表的效果调用

setState

。那是额外的渲染

由于您不需要在state中存储

listA

和

listB

，因此我建议您不要这样做；它们是“派生”状态，可以简单地作为

列表

属性和过滤器的结果进行计算