如何在React中存储Array.map()中的每个元素?(带useMemo)

Question

我有以下元素：

<p>{user.name}</p>

我可以通过做来记忆它

useMemo(() => (
<p>{user.name}</p>
), [user]);

现在，假设我有以下代码：

users.map((user) => (
<p>{user.name}</p>
));

如何存储数组中的每个元素，以便在发生更改时只有该元素(而不是整个数组(重新发送？

Answer 1

我相信这是useCallback的一个可能用例。

const renderUser = useCallback((user) => (
<p>{user.name}<p>
), []);
const users = users.map(renderUser);

你可能有点想得太多了，但也可能是这个例子让你很难确定这个问题的为什么。

你试图记忆的东西，以最简单的形式，是一个带有一个名为name的道具的功能组件。为什么不这样用呢？

export const UserName = ({ name }) => (<p>{name}<p>)

如果这样做没有任何价值，为什么不像你的非记忆示例一样，在需要的地方直接呈现结果呢？

users.map((user) => (
<p>{user.name}</p>
));

除非在映射函数的JSX模板或该映射中使用的fn组件中发生了一些繁重的计算，否则我认为您不会从存储这样的内容中受益匪浅。