`useSelector` 中可以使用 `map` 吗?
Can `map` be used in `useSelector`?
我正在尝试在 useSelector
中使用 map
。是否有任何限制或良好的编码习惯禁止使用它?
const { items } = useSelector((state: any) => ({
items: state.appReducer.items.map((item: any) => {
return { itemID: item.id, itemDescription: item.desc }
})
}))
那是 useSelector 而不是 useEffect。
在钩子内部使用map
,就是循环执行一个同步回调函数。所以,这里没有什么可担心的。
可以,但是您的选择器有问题。 useSelector
将 运行 您的选择器在 每个 分派操作之后,并强制组件在选择器 returns 一个新值引用时重新呈现:
您的选择器总是返回一个新对象,因此它将总是导致该组件重新渲染,即使商店里的相关数据没有变化.
我建议通读 Redux 文档的这些部分,以了解如何编写性能更好的选择器:
- https://redux.js.org/usage/deriving-data-selectors
- https://redux.js.org/tutorials/fundamentals/part-5-ui-react#react-redux-patterns
- https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns#memoized-selectors
- https://redux.js.org/tutorials/essentials/part-6-performance-normalization#improving-render-performance
我正在尝试在 useSelector
中使用 map
。是否有任何限制或良好的编码习惯禁止使用它?
const { items } = useSelector((state: any) => ({
items: state.appReducer.items.map((item: any) => {
return { itemID: item.id, itemDescription: item.desc }
})
}))
那是 useSelector 而不是 useEffect。
在钩子内部使用map
,就是循环执行一个同步回调函数。所以,这里没有什么可担心的。
可以,但是您的选择器有问题。 useSelector
将 运行 您的选择器在 每个 分派操作之后,并强制组件在选择器 returns 一个新值引用时重新呈现:
您的选择器总是返回一个新对象,因此它将总是导致该组件重新渲染,即使商店里的相关数据没有变化.
我建议通读 Redux 文档的这些部分,以了解如何编写性能更好的选择器:
- https://redux.js.org/usage/deriving-data-selectors
- https://redux.js.org/tutorials/fundamentals/part-5-ui-react#react-redux-patterns
- https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns#memoized-selectors
- https://redux.js.org/tutorials/essentials/part-6-performance-normalization#improving-render-performance