Question

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

Answer 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>
  )
}

Answer 2

如果给定相同的道具，功能组件呈现相同的结果，则可以使用React.memo。同样，React为类组件提供了PureComponent。

它在React doc中被提及：

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

因此，您需要使用React.memo。

防止setState重新呈现整个功能组件

2 个答案: