时间戳

首页 > 解决方案 > 反应 useState 与原始变量

reactjs - 反应 useState 与原始变量

问题描述

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

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

在下一次重新渲染期间是否可以帮助我摆脱多余的“映射”？

标签： reactjsreact-hooks

解决方案

不，它没有帮助。
我认为最好完全摆脱第一张地图并在第二张地图中做任何你想做的事情。但如果您认为这对您的应用程序来说是必要的，您可以使用useMemohook。
这个钩子为你提供了一个记忆值，只有在某些参数发生变化时才会重新计算。
例如：

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 时，组件都会重新渲染，并且新值将显示给用户。

推荐阅读