反应钩useEffect（）清理仅componentWillUnmount吗？

让我解释一下此代码的结果，以便轻松询问我的问题。

const ForExample = () => {
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    useEffect(() => {
        console.log('effect');
        console.log({
            name,
            username
        });

        return () => {
            console.log('cleaned up');
            console.log({
                name,
                username
            });
        };
    }, [username]);

    const handleName = e => {
        const { value } = e.target;

        setName(value);
    };

    const handleUsername = e => {
        const { value } = e.target;

        setUsername(value);
    };

    return (
        <div>
            <div>
                <input value={name} onChange={handleName} />
                <input value={username} onChange={handleUsername} />
            </div>
            <div>
                <div>
                    <span>{name}</span>
                </div>
                <div>
                    <span>{username}</span>
                </div>
            </div>
        </div>
    );
};

当ForExample component坐骑，“效果”将被记录。这与有关componentDidMount()。

每当我更改名称输入时，都会记录“效果”和“清理”。反之亦然，自从我添加[username]到的第二个参数以来，每次更改用户名输入都不会记录任何消息useEffect()。这与componentDidUpdate()

最后，在ForExample component卸载时，将记录“清理”。这与有关componentWillUnmount()。

我们都知道。

总而言之，只要重新渲染组件（包括卸载），就会调用“清理”

如果要使该组件仅在卸载时记录“清除”，则只需将第二个参数更改useEffect()为[]。

但是，如果我更改[username]为[]，ForExample component将不再实现componentDidUpdate()for名称输入。

我要做的是，使组件componentDidUpdate()仅支持名称输入和componentWillUnmount()。（仅在卸载组件时记录“清理”）

由于清理操作不依赖于username，因此您可以将清理操作放在一个单独的对象中useEffect，该对象将空数组作为第二个参数。

例

const { useState, useEffect } = React;

const ForExample = () => {
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");

  useEffect(
    () => {
      console.log("effect");
    },
    [username]
  );

  useEffect(() => {
    return () => {
      console.log("cleaned up");
    };
  }, []);

  const handleName = e => {
    const { value } = e.target;

    setName(value);
  };

  const handleUsername = e => {
    const { value } = e.target;

    setUsername(value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={handleName} />
        <input value={username} onChange={handleUsername} />
      </div>
      <div>
        <div>
          <span>{name}</span>
        </div>
        <div>
          <span>{username}</span>
        </div>
      </div>
    </div>
  );
};

function App() {
  const [shouldRender, setShouldRender] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setShouldRender(false);
    }, 5000);
  }, []);

  return shouldRender ? <ForExample /> : null;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

您可以使用多种用途

例如，如果我的变量是data1，我可以在我的组件中使用所有这些

useEffect( () => console.log("mount"), [] );
useEffect( () => console.log("will update data1"), [ data1 ] );
useEffect( () => console.log("will update any") );
useEffect( () => () => console.log("will update data1 or unmount"), [ data1 ] );
useEffect( () => () => console.log("unmount"), [] );

function LegoComponent() {

  const [lego, setLegos] = React.useState([])

  React.useEffect(() => {
    let isSubscribed = true
    fetchLegos().then( legos=> {
      if (isSubscribed) {
        setLegos(legos)
      }
    })
    return () => isSubscribed = false
  }, []);

  return (
    <ul>
    {legos.map(lego=> <li>{lego}</li>)}
    </ul>
  )
}

在上面的代码中，fetchLegos函数返回一个promise。我们可以通过在useEffect范围内设置条件来“取消”承诺，从而防止应用程序在组件卸载后设置状态。

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消使用useEffect清理功能中的所有订阅和异步任务。

useEffect在其自己的范围内被隔离，并相应地呈现。图片来自https://reactjs.org/docs/hooks-custom.html

我没有创建太多复杂的函数和方法，而是创建了一个事件侦听器，并自动为我完成了挂载和卸载，而不必担心手动进行。这是一个例子。

//componentDidMount
useEffect( () => {

    window.addEventListener("load",  pageLoad);

    //component will unmount
    return () => {
       
        window.removeEventListener("load", pageLoad);
    }

 });

既然完成了这一部分，我就可以像这样从pageLoad函数运行我想要的任何东西。

const pageLoad = () =>{
console.log(I was mounted and unmounted automatically :D)}