可以在useEffect中有条件地进行不同的清理吗？

debugcn 发表于 Dev

月

所以，我有一个useEffect这样的：

useEffect(()=>{
    if(foo) {
        // do something
        return () => { // cleanup function }
    }
}, [foo])

在此，cleanup即使if执行了block ，也不会调用该函数。但是如果我将效果修改为：

useEffect(()=>{
    if(foo) {
        // do something
    }
    return () => { // cleanup function }
}, [foo])

有用。因此，仅return在最后一个语句useEffect或我缺少某些内容时才进行清理吗？

或Drori

每次useEffect调用更新程序功能时，都会重新创建清除功能。当依赖项发生更改时（或如果没有依赖项，则在每个渲染上），或者在卸载组件之前，将调用当前的清理函数。调用清理后，将调用更新程序，并可以返回新的清理函数。

每当调用updater函数时，您都可以返回其他函数，或者根本不返回。

例如，多次单击“公司”按钮，您会在控制台中看到清除功能仅对偶数存在counter，因为它是有条件返回的。

const { useState, useEffect } = React;

const Demo = () => {
  const [counter, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`Effect ${counter}`);
    
    if(counter % 2 === 0) {
      return () => console.log(`Cleanup ${counter}`);
    }
  }, [counter]);
  
  return (
    <div>
      <p>Counter: {counter}</p>
      
      <button onClick={() => setCount(counter + 1)}>Inc</button>
    </div>
  );
};

ReactDOM.render(
  <Demo />,
  root
);

.as-console-wrapper { top: 0; left: 50% !important; max-height: unset !important; }

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

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

有时，将清除功能嵌套在条件中可能会造成混淆。另一个选择是始终返回清除函数，并将逻辑放入其中：

useEffect(()=>{
    if(foo) {
        // do something
    }
    
    return () => { 
      if(foo) {
        // cleanup something
      }
    }
}, [foo])

您可以在此示例中看到结果是相同的：

const { useState, useEffect } = React;

const Demo = () => {
  const [counter, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`Effect ${counter}`);

    return () => {
      if(counter % 2 === 0) {
        console.log(`Cleanup ${counter}`);
      }    
    };
  }, [counter]);
  
  return (
    <div>
      <p>Counter: {counter}</p>
      
      <button onClick={() => setCount(counter + 1)}>Inc</button>
    </div>
  );
};

ReactDOM.render(
  <Demo />,
  root
);

.as-console-wrapper { top: 0; left: 50% !important; max-height: unset !important; }

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。