reactjs - 当数组未更改时，在每个渲染中都会调用 useEffect 数组依赖项

Question

import React, { useState, useEffect } from "react";

export default function App() {
  const [columns, setColumns] = useState([
    { name: "a" },
    { name: "b" },
    { name: "c" }
  ]);
  const [isOpen, setIsOpen] = useState(false);

  const addName = () => setColumns([...columns, { name: "r" }]);
  const toggleOpen = () => setIsOpen(!isOpen);

  return (
    <>
      <List columns={columns} />
      <button onClick={toggleOpen}>Toggle</button>
      <button onClick={addName}>Add</button>
      <p>{isOpen.toString()}</p>
    </>
  );
}

const List = ({ columns }) => {
  const names = columns.map(col => col.name);
  useEffect(() => {
    console.log("Names is changed to: ", names);
  }, [names]);

  return <p>{names.join(" ")}</p>;
};

当 App 组件中的 isOpen 状态更改时，

Names 更改为: 被调用。我希望仅当名称数组更改时才执行 console.log 。我认为在 List 组件中，每次渲染时都会创建一个新数组，因此之前的数组和新数组不相等。

Answer 1

你should memoize the component因此它将仅在 props 更改时渲染(或者如果比较函数作为第二个参数传递)。

目前，List 由于其父 App 渲染而呈现。

const List = ({ columns }) => {
  const names = columns.map((col) => col.name);
  useEffect(() => {
    console.log("Names is changed to: ", names);
  }, [names]);

  return <p>{names.join(" ")}</p>;
};

const MemoList = React.memo(List);

export default function App() {
  return (
    <>
      <MemoList columns={columns} />
    </>
  );
}

查看工作示例:

<小时/>

对于类组件，使用React.PureComponent或实现shouldComponentUpdate。