在useEffect的依赖项中优先使用原始值

在使用React时，有时候需要根据条件来触发effect。在大多数情况下，只需要将依赖项数组传递给useEffect()即可实现。但是，在某些情况下，这可能会导致不必要的性能下降。

当整个对象作为依赖项传递时，而实际上只需要一个原始值时，就会出现这种问题。由于对象的特性是按引用传递的，比较依赖项时总会触发重新运行。这最终导致effect不必要地运行。

const CartItem = ({ item }) => {
  useEffect(() => {
    console.log(`${item.name}的数量已更改为${item.quantity}。`);
  }, [item]);

  return (
    <>
      <h3>{item.name}</h3>
      <span>
        {item.price} x {item.quantity}
      </span>
    </>
  );
};

解决方案是只使用effect所依赖的对象的部分属性。通常，这些属性是原始值，比如字符串和数字。将它们的值与先前的依赖项进行比较更高效，避免了不必要的重新运行。

const CartItem = ({ item }) => {
  const { name, quantity, price } = item;

  useEffect(() => {
    console.log(`${name}的数量已更改为${quantity}。`);
  }, [name, quantity]);

  return (
    <>
      <h3>{name}</h3>
      <span>
        {price} x {quantity}
      </span>
    </>
  );
};