时间戳

首页 > 解决方案 > 有什么区别？更新列表的两种方法

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 (
    ......
  )
}

标签： reactjs

解决方案

不同之处在于，在第一种情况下，您最终将冗余信息存储在状态中。此外，当您的列表更改时，您将运行您的效果，设置 and 的状态listA，listB并最终获得额外的组件渲染。

以这个代码框为例。您可以在控制台中看到我们的组件渲染了两次：一次用于初始渲染，一次作为效果调用setState新列表的结果。那是额外的渲染！

由于您不需要存储listA和listB处于状态，因此我建议您不要这样做；它们是“派生”状态，可以简单地作为list道具和过滤器的结果进行计算。

推荐阅读