Reactjs React useState vs raw变量

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

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

---

在下一次重播时，它是否有助于我消除冗余的“映射”？

我想你需要的是。他们使用

shouldComponentUpdate

来确定组件是否需要重新渲染。在您的情况下，如果道具相同，则如果使用纯组件，组件将不会重新渲染。

不，这没有帮助。
我认为最好完全摆脱第一张地图，在第二张地图上做任何你想做的事情。但如果你认为这对你的应用程序是必要的，你可以使用

usemo

hook。
此挂钩为您提供了一个记忆值，仅当某些参数发生变化时，该值才会重新计算。
例如：

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

const Counter=（道具）=>{
const[value，setValue]=useState（0）
返回(
{value}

设置值（值+1）}>增量
设置值（值-1）}>减量
)
}

---

因此，无论何时调用setValue，组件都会重新呈现，新值将显示给用户。

Yes。但我想使用PureComponent。也许你知道一些秘密？实际上，我还有很多其他的状态（通过帮助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>
    )
}