React.useEffect 继续执行

Question

React.useEffect 会在每次点击按钮时继续执行。不知道为什么？有人可以帮忙吗？

const Dropdown1 = ({
  selectedItems = [],
}) => {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    console.log(selectedItems);
  }, [selectedItems]);

  return (
    <Button
      className="button"
      onClick={() => setOpen((prev) => !prev)}
    >
      Select
    </Button>

  );
};

// Render
<Dropdown1 />

Answer 1

因为这个：

const Dropdown1 = ({ selectedItems = [] }) => {

selectedItems

值不是状态驱动的，也不是组件接收到的道具：

<Dropdown1 />

空数组是函数参数的默认值。 每次执行该函数时，它都会创建一个空数组来满足该默认参数。 每个这样的数组都是一个新实例，因此它会触发

useEffect

依赖项。

相反，提供一个实例作为 prop：

<Dropdown1 selectedItems={[]} />

在这种情况下，该值不是由函数创建的，而是提供给函数的。 由于父组件不会重新渲染，因此它是相同的数组引用，并且不会触发

useEffect

依赖项。