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

【问题标题】：Is using array.map in react causes systematic render of each item?在 react 中使用 array.map 是否会导致每个项目的系统渲染？
【发布时间】：2019-12-28 23:22:34
【问题描述】：

我刚刚注意到，每次单个元素发生变异时，我的 Array.map 函数生成的元素都会重新渲染。以下示例演示了该问题。我可以看到元素正在被重新渲染，因为在渲染时使用了 console.log 函数，但是 useEffect 函数表明 props 没有改变。

https://codesandbox.io/s/polished-flower-8shvj

我错过了什么吗？

【问题讨论】：

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

标签： reactjs list optimization

【解决方案1】：

如果你熟悉 React 类生命周期方法，可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

从React Hooks documentation 开始，console.log 输出将显示在您的控制台中，因为useEffect 的行为类似于经典的componentDidMount，因此，这是完全正常的行为。

【讨论】：

【解决方案2】：

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

如果你的函数组件在相同的情况下呈现相同的结果道具，您可以将其包装在对 React.memo 的调用中以提高性能在某些情况下，通过记忆结果。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。

React.memo docs

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

在您的情况下不需要，但如果您想将自定义函数作为第二个参数传递，它看起来像这样：

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

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

https://codesandbox.io/s/musing-brahmagupta-3yxjo

【讨论】：