useEffect允許您返回一個清理函數，該函數將在組件卸載時運行。
注意：只要依賴數組中的某些內容發生更改，它也會運行useEffect。它向您保證您將始終獲得“新鮮”的效果。
通過清理來響應文檔useEffect。
這是他們使用的示例：
使用類：
componentDidMount() {
? ? ChatAPI.subscribeToFriendStatus(
? ? ? this.props.friend.id,
? ? ? this.handleStatusChange
? ? );
? }
componentWillUnmount() {
? ChatAPI.unsubscribeFromFriendStatus(
? ? this.props.friend.id,
? ? this.handleStatusChange
? );
}
使用鉤子：
useEffect(() => {
? function handleStatusChange(status) {
? ? setIsOnline(status.isOnline);
? }
? ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
? // Specify how to clean up after this effect:
? return function cleanup() {
? ? ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
? };
});
這是一個工作示例：
function App() {
? const [boolean,setBoolean] = React.useState(true);
??
? const toggleBoolean = () => setBoolean((prevState) => !prevState);
? return(
? ? <div>
? ? ?{ boolean ?
? ? ? ? ?<Component1/>
? ? ? ?: <Component2/>
? ? ?}
? ? ? ?<button onClick={toggleBoolean}>Toggle</button>
? ? ?</div>
? );
}
function Component1() {
? React.useEffect(() => {
? ? console.log("Component1 has mounted...");
? ? return () => { console.log("Component1 has unmounted...")};
? },[]);
? return(
? ? <div>Component1</div>
? );
}
function Component2() {
? return(
? ? <div>Component2</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"/>
