useEffect（副作用）

副作用

• 对环境改变即为副作用，如修改document.titl
• 但是我们不一定非要把副作用放到useEffect
• 实际上叫afterRender更好，每次render后执行

用途

用途1、作为 componentDidMount 使用，[]做第二个参数，可以用来请求异步数据

代码演示

useEffect(()=>{
    const users = 执行一次()
},[])

用途2、作为 componentDidUpdate 使用,可指定依赖

代码演示

useEffect(()=>{
    console.log("n更新了")
},[n])

用途3、作为 componentWillUnmount 使用，通过return

代码演示

useEffect(() => {
    const subscription = 订阅全国人民吃饭的情报！
    return () => {
        取消订阅全国人民吃饭的情报！
    }
},[])
//////////////////////////////////////////
 const [count, setCount] = useState(0)
    useEffect(() => {
        console.log('use effect...',count)
        const timer = setInterval(() => {
            console.log('timer...count:', count)
            setCount(count + 1)
        }, 1000)
        return ()=> clearInterval(timer)
    },[])

疑问：为什么要取消订阅？

大家都知道，render了之后会执行重新useEffect，如果useEffect里面有一个每setInterval...那么每次render了，再次执行useEffect就会再创建一个setInterval，然后就混乱了...可以把下面案例return的内容删掉感受下

用途4、每次 render 都执行

代码演示

useEffect(() => {
  console.log（"每次render都执行"）
})

注意事项

注意事项1：useEffect 不能被判断包裹

代码演示

const [count, setCount] = useState(0)
if(2 < 5){
   useEffect(() => {
        console.log('use effect...',count)
        const timer = setInterval(() => setCount(count +1), 1000)
        return ()=> clearInterval(timer)
    }) 
}

注意事项2：useEffect 不能被打断

const [count, setCount] = useState(0)
useEffect(...)

return // 函数提前结束了

useEffect(...)
}

注意事项3：useEffect 里面使用到的state的值, 固定在了useEffect内部， 不会被改变，除非useEffect刷新，重新固定state的值

代码演示

 const [count, setCount] = useState(0)
    useEffect(() => {
        console.log('use effect...',count)
        const timer = setInterval(() => {
            console.log('timer...count:', count)
            setCount(count + 1)
        }, 1000)
        return ()=> clearInterval(timer)
    },[])