反应useState与原始变量

时间:2019-02-20 14:23:16

标签: reactjs react-hooks

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

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

是否在下次重新渲染期间摆脱多余的“映射”?

2 个答案:

答案 0 :(得分:1)

不,没有帮助。
我认为最好完全摆脱第一张地图,然后在第二张地图中做任何您想做的事情。但是如果您认为这对于您的应用程序是必要的,则可以使用useMemo钩子。
该挂钩为您提供了一个记忆值,仅当某些参数发生更改时才重新计算。
例如:

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

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


但是useState呢?每当有一些变量发生变化时就使用它,我们想重新渲染组件并显示一些新内容。例如,我们有一个Counter,每当其值更改时,我们都希望重新渲染组件并显示新的Value。所以我们使用这样的东西:

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

答案 1 :(得分:0)

我认为您正在寻找的是Pure Components。他们使用shouldComponentUpdate来确定组件是否需要重新渲染。在您的情况下,如果道具相同,则使用Pure Component不会重新渲染该组件。