reactjs - 防止 setState 重新渲染整个功能组件

Question

在类组件中，当 state 或 props 发生变化时，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>
  )
}