2.7 分开处理副作用useEffect的依赖项的使用

一、分开处理副作用useEffect

1. useEffect可以编写多个

2. 可以设置触发条件：修改某个值的时候才可以触发，也就是指定依赖项，可以使用第二个参数实现

   import { useEffect, useState } from 'react'
   
   function App() {
     const [count, setCount] = useState(0)
     const [msg, setMsg] = useState('Hello')
   
     // 指定依赖项，只有依赖项发生改变后才会触发
     useEffect(() => {
       console.log(count)
     }, [count])
   
     useEffect(() => {
       console.log(msg)
     }, [msg])
     
     // 只有初始化才爱会触发，更新不会触发，因为匹配不到
     useEffect(() => {
       console.log(123)
     }, [])
   
     const handleClick = () => {
       setCount(count + 1)
       setMsg('hello snow')
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>点击</button>
       </>
     )
   }
   
   export default App
   

   备注：

   ​ 初始化的时候都会触发，更新时，只有依赖项改变的才会触发

   注意：

   1. 如果第二个参数是空数组，那么只会在初始的时候触发，而更新的时候不会触发

   2. ESLint会检测依赖项是否正确，包括：props，state，计算变量等