在反应中使用array.map会导致每个项目的系统渲染吗？

Question

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

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

我想念什么吗？

Answer 1

  

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

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

Answer 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