理解反应效应函数。何时调用useffect中的回调函数（即unsubscribe）？

Question

我一直在试图理解什么时候取消订阅（在use效应中的回调）会被准确地调用。

这是代码笔链接：https://codepen.io/deen_john/pen/eYmNdMy代码：

const { useState, useEffect } = React  ;
 
function App() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
    console.log("use effect called ");
    
    return () => {
      console.log("unsubscribe ")
    }
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

问题：在我的例子中，使用效果钩子中的回调函数（即取消订阅），每次我点击按钮时都会被调用（即每次我更新按钮状态）。但是，根据React留档，use效应中的回调工作类似于组件WillUnMount生命周期，所以在我的例子中，它应该只有在应用组件被卸载时才被调用。我只是在这里更新按钮状态，而不是在每次点击时卸载应用程序组件。

Answer 1

React将始终尝试更新您的效果。因此，无论何时运行，默认情况下都会尝试清理最后一个效果以应用新效果。

• 每次渲染后运行的效果

因此，如果效果在每次渲染后运行，React将在每次渲染后清理，然后应用新效果。

• 基于某些依赖项运行的效果

如果效果取决于某些变量（包含在依赖项数组[a、b等]中）来决定是否应再次运行，同样的情况也会发生。如果它将再次运行，React将在运行效果之前运行清理函数。

• 仅在第一次渲染后运行的效果

如果效果仅在第一次渲染后运行（使用空的依赖项数组[]），则React仅在卸载组件后执行清理。

例子：

下面的片段显示了该行为。

function App() {
  console.log('Rendering App...');
  const [show2,setShow2] = React.useState(true);
  const [stateBool,setStateBool] = React.useState(true);
  return(
    <React.Fragment>
      <button onClick={()=>{
        console.clear();
        setStateBool((prevState)=>!prevState)}
      }>
        Update App
      </button>
      <button onClick={()=>{
        console.clear()
        setShow2((prevState)=>!prevState)}
      }>
        Toggle Component2
      </button>
      <Component1/>
      {show2 && <Component2/>}
    </React.Fragment>
  );
}

function Component1() {
  console.log('Rendering Component1...');
  React.useEffect(()=>{
    console.log('useEffect Component1 after every render...');
    return () => console.log('Cleaning up useEffect Component1...');
  });
  return(
    <div>Component1</div>
  );
}

function Component2() {
  console.log('Rendering Component2...');
  React.useEffect(()=>{
    console.log('useEffect Component2 only after 1st render...');
    return () => console.log('Cleaning up useEffect Component2...');
  },[]);
  return(
    <div>Component2</div>
  );
}

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

html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 2

每次在下次调用useEffect之前以及组件卸载时，都会调用useEffect的unsubscribe事件

因为在您的情况下，您没有将任何依赖项数组传递给useEffect，所以useEffect将在组件的每个渲染上运行，因此在触发下一个useEffect之前，取消订阅将在每次重新渲染上运行

编写上述代码的更好方法是将依赖项数组中的count传递给useffect

const { useState, useEffect } = React;
 
function App() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
    console.log("use effect called ");
    
    return () => {
      console.log("unsubscribe ")
    }
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

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