Reactjs 在react中使用array.map是否会导致每个项目的系统化渲染？

我刚刚注意到，每当单个元素发生变化时，生成我的Array.map函数的元素都会重新呈现。 下面的例子说明了这个问题。我可以看到元素正在重新渲染，因为在渲染时使用了console.log函数，但是useffect函数表明props没有改变

我错过什么了吗

如果您熟悉React类生命周期方法，可以将useEffect钩子看作componentDidMount、componentDidUpdate和componentWillUnmount的组合

从开始，console.log输出将显示在您的控制台中，因为useEffect将像经典的componentDidMount一样工作，因此，这是它的完全正常行为。

您可以将React.memo作为性能优化来实现

如果函数组件呈现相同的结果，则给定相同的 道具，你可以把它包装成一个电话来回应。备忘录来提高性能 在某些情况下，通过记录结果。这意味着React将跳过 渲染组件，并重用上次渲染的结果

在您的情况下，不需要它，但如果您希望将自定义函数作为第二个参数传递，它将如下所示：

const Item = React.memo(function Item(props) {
// function component body
}, areEqual)

function areEqual(prevProps, nextProps) {
  return prevProps.value === nextProps.value;
}

---

请在问题中给出一个答案，但是：您是否提供了一个合理的关键道具？事实上，您的代码来自codesandbox，工作正常，在useEffect中，您可以记录值，并且它会改变。现在你只需要记录你的名字。只要保持相同的dom结构和键名，数组映射就不会重新安装组件。

const Item = React.memo(function Item(props) {
// function component body
}, areEqual)

function areEqual(prevProps, nextProps) {
  return prevProps.value === nextProps.value;
}