防止 setState 重新渲染整个功能组件答案

【问题标题】：Preventing setState rerenders entire functional component防止 setState 重新渲染整个功能组件
【发布时间】：2020-03-27 02:34:20
【问题描述】：

在类组件中，当状态或道具发生变化时，渲染方法将执行，但我不知道在功能组件中，当发生相同情况时，哪部分代码被重新渲染？

【问题讨论】：

整个函数重新运行。
@NicholasTower 如何防止重新渲染局部变量，我不想创建全局变量。

标签： reactjs

【解决方案1】：

如果您想跳过组件内部的一些昂贵计算，您可以使用useMemo hook。它将第一次进行计算，然后在随后的时间里，它只会在其中一个依赖项发生变化时重新计算。例如：

import React, { useMemo } from 'react';

const Example = ({ people }) => {
  const [ageFilter, ageFilter] = useState(10);
  const filteredPeople = useMemo({
    return people.filter(person => person.age >= ageFilter);
  }, [people, ageFilter]);

  return (
    <div>
      {filteredList.map(person=> (
        // some components
      ))}
    </div>
  )
}

【讨论】：

【解决方案2】：

如果你的函数组件给定相同的 props 渲染相同的结果，你可以使用React.memo。同样对于类组件，React 提供了PureComponent。

在React doc中提到：

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

所以，你需要使用React.memo。

【讨论】：