通过 useSelector 呈现项目列表哪个性能更高?

Question

我想获取一个项目列表并为每个项目渲染一个组件。

该项目是一个像{"id":1,"name":"cleaner","attributes":{"color":"red","size":"large"}}一样的深层物体。

解决方案一：顶层单次使用选择器，将道具传递给孩子

const Child = (props) => {
const { item } = props;
return (
<div>
<div>{item.id}</div>
<div>{item.name}</div>
</div>
);
};
const Parent = () => {
const items = useSelector(state => state.items, shallowEqual);
return (
<div>
{items.map(item => <Child key={item.id} item={item} />)}
</div>
);
};

解决方案二：在顶层检索键，使用子级中的选择器检索对象

const Child = (props) => {
const { itemId } = props;
const item = useSelector(state => state.items.find(item => item.id === itemId) || {}, shallowEqual);
return (
<div>
<div>{item.id}</div>
<div>{item.name}</div>
</div>
);
};
const Parent = () => {
const itemIds = useSelector(state => state.items.map(item => item.id), shallowEqual);
return (
<div>
{itemIds.map(id => <Child key={id} itemId={id} />)}
</div>
);
};

Answer 1

由于您已经在使用 redux，因此您不必处理涉及提升状态的场景。

在解决方案 II 中，父级和子级都使用useSelector，该最小化为对解决方案 I 的一次调用，实际上Child是一个愚蠢的组件，这是一件好事。

我发现尽可能减少计算逻辑是一件好事。与解决方案 I 相比，解决方案 II 具有更多的计算逻辑，因此我会选择后者。