2.9 useEffect清理操作的重要性

一、useEffect清理操作

1. 当卸载组件或更新组件的时候，可以通过useEffect来实现一些清理工作

   import { useEffect, useState } from 'react'
   
   function Chat({ title }) {
     useEffect(() => {
       console.log('进入', title)
   
       // useEffect的清理工作
       // 1. 卸载组件的时候，2.下次更新前，清理当前作用域
       return () => {
         console.log('退出', title)
       }
     }, [title])
   
     return (
       <>
         <div>hello chat</div>
       </>
     )
   }
   
   function App() {
     const [show, setShow] = useState(true)
     const [title, setTitle] = useState('聊天室1')
   
     const handleClick = () => {
       setShow(false)
     }
   
     const handleChange = (e) => {
       setTitle(e.target.value)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>关闭</button>
         <select value={title} onChange={handleChange}>
           <option value={'聊天室1'}>聊天室1</option>
           <option value={'聊天室2'}>聊天室2</option>
         </select>
         {show && <Chat title={title} />}
       </>
     )
   }
   
   export default App
   

2. 严格模式下可以检测useEffect是否清理

3. 初始化数据时，要注意清理操作，所以更简洁的方式是使用第三方，例如：ahooks中的useRequest