反应usestate vs原始变量

Question

例如，我有一些需要渲染的数据。物品总是相同的，但它们来自道具。

const items = props.data.values.map(value => ({
  id: value.id
  name: value.name,
  rating: Number(value.rating)
}));
return (
  {items.map(item => (
    <div key={item.id}....
  )}
);

我可以将Usestate用于类似的项目：

const [items] = useState(data.values.map(value => ({
  id: value.id
  name: value.name,
  rating: Number(value.rating)
})));

是否可以帮助我摆脱下一个播放器期间的冗余"映射"？

Answer 1

不，它无济于事。
我认为最好完全摆脱第一张地图，并在第二张地图上做任何您想做的事情。但是，如果您认为这是您的应用所必需的，则可以使用useMemo钩。
此挂钩为您提供了一个回忆的值，仅在某些参数更改时才会重新计算。
例如：

const items = useMemo(() => {
    return data.values.map(...)
}, [data])

此示例仅在数据的值更改时才能计算项目。否则，它将返回回忆版本，并且不会重新计算任何内容。

---

但是useState呢？每当我们有一些变量时，它都会使用，每当它更改时，我们都希望重新渲染组件并显示一些新内容。例如，我们有一个对抗，每当其值变化时，我们都希望重新渲染组件并显示新值。因此，我们使用这样的东西：

const Counter = (props) => {
    const [value, setValue] = useState(0)
    return (
        <div>
            <p>{value}</p>
            <button onClick={() => setValue(value + 1)}>Increment</button>
            <button onClick={() => setValue(value - 1)}>Decrement</button>
        </div>
    )
}

因此，每当我们调用setValue时，组件重新订阅者和新值将显示给用户。

Answer 2

我认为您要寻找的是纯粹的组件。他们使用shouldComponentUpdate来确定组件是否需要重新渲染。在您的情况下，如果道具相同，则如果使用纯组件，则组件将不会重新渲染。