React之旅-08 useEffect

概念

useEffect 是一个特殊的钩子，允许你在 React 中运行副作用。它与 componentDidMount 和 componentDidUpdate 类似，但它只在组件（或其部分属性）发生变化以及初始挂载时运行。

原型

useEffect(setup, dependencies?)

用法

在你的组件顶部调用 useEffect 来声明一个 Effect。

参数

setup：具有 Effect 逻辑的函数。您的 setup 函数也可以选择返回 cleanup 函数。当你的组件被添加到 DOM 时，React 将运行你的 setup 函数。在每次使用更改的依赖项重新渲染后，React 将首先使用旧值运行清理函数（如果你提供了），然后使用新值运行你的 setup 函数。从 DOM 中删除组件后，React 将运行你的清理函数。

dependencies（可选）：依赖项列表——setup 代码中引用的所有响应值的列表。响应式值包括 props、state 以及直接在组件体内声明的所有变量和函数。React 将使用 Object.is 比较将每个依赖项与其之前的值进行比较。如果省略此参数，则 Effect 将在每次重新渲染组件后重新运行。

情景1：ALWAYS

const Toggler = ({ toggle, onToggle }) => {
  React.useEffect(() => {
    console.log('I run on every render: mount + update.');
  });

  return (
    

      
        Toggle
      

      {toggle && 
Hello React
}
    
  );
};

这是 useEffect 最直接的用法，我们只传递一个参数 (一个函数)。此函数将在每次渲染时进行渲染 ，这意味着它在组件的第一次渲染（ 也称为在组件的挂载或挂载时）和组件的每次重新渲染时（也称为在组件的更新或更新时）运行时运行。

情景2：MOUNT

const Toggler = ({ toggle, onToggle }) => {
  React.useEffect(() => {
    console.log('I run only on the first render: mount.');
  }, []);

  return (
    

      
        Toggle
      

      {toggle && 
Hello React
}
    
  );
};

第二个参数，这里是一个空数组，称为 dependency array。如果 dependency 数组为空，则 React 的 useEffect Hook 中使用的 side-effect 函数没有 dependencies，这意味着它仅在组件第一次渲染时运行。

情景3：UPDATE

const Toggler = ({ toggle, onToggle }) => {
  React.useEffect(() => {
    console.log('I run only if toggle changes (and on mount).');
  }, [toggle]);

  return (
    

      
        Toggle
      

      {toggle && 
Hello React
}
    
  );
};

现在，这个 React 组件的副作用函数仅在依赖数组中的变量发生变化时运行 。但是，请注意，该函数也会在组件的第一次渲染 （mount） 上运行。无论如何，依赖项数组的大小可能会增加，因为它毕竟是一个数组，所以你可以传入多个变量。

情景4：CLEANUP

import * as React from 'react';

const App = () => {
  const [timer, setTimer] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => setTimer(timer + 1), 1000);

    return () => clearInterval(interval);
  }, [timer]);

  return 
{timer}
;
};

export default App;

当组件第一次渲染时，它与 React 的 useEffect Hook 设置一个间隔，每 1 秒滴答一次。一旦间隔计时，计时器的状态将增加 1。状态更改会启动组件的重新渲染。由于计时器状态已更改，因此如果没有 cleanup 函数，useEffect 函数将再次运行并设置另一个间隔。这不是我们想要的行为，因为我们毕竟只需要一个间隔。这就是为什么 useEffect 函数在组件更新之前清除间隔，然后组件设置新的间隔。实际上，在此示例中，间隔在被清理之前只运行一秒钟。