react use state（【React】useEffect使用详解）

useEffect 介绍

如果你熟悉 React class 的生命周期函数  
    
    
，你可以把 useEffect Hook 看做

componentDidMount

     


     


   ，componentDidUpdate 和 componentWillUnmount 这三个函数的组合  
    
    
。 componentDidMount 组件挂载 componentDidUpdate 组件更新 componentWillUnmount 组件将要摧毁

使用方法

情况一：

useEffect需要传递两个参数 




 




 

，第一个参数是逻辑处理函数  

   

   

，第二个参数是一个数组

代码如下： useEffect(() => { /** 执行逻辑 */ },[])

情况二：

第二个参数存放变量

     

     

  ，当数组存放变量发生改变时  




  




  
，第一个参数  


  


  


，逻辑处理函数将会被执行 第二个参数可以不传
     
     
 ，不会报错
   




   




   ，但浏览器会无限循环执行逻辑处理函数

     


     


   。

代码如下： useEffect(() => { /** 执行逻辑 */ })

情况三：

第二个参数如果只传一个空数组 



 



 



，逻辑处理函数里面的逻辑只会在组件挂载时执行一次           ，等价于 componentDidMount

代码如下： useEffect(() => { /** 执行逻辑 */ },[])

情况四：

第二个参数如果不为空数组,依赖指定参数触发使用 逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和componentDidUpdate 的结合 const [a, setA] = useState(1); const [b, setB] = useState(2); useEffect(() => { /** 执行逻辑 */ },[a,b])

情况五：

useEffect第一个参数可以返回一个回调函数

    




    




    ，这个回调函数将会在组件被摧毁之前和再一次触发更新时













，将之前的副作用清除掉 




 




 

。这就相当于componentWillUnmount  

   

   

。 useEffect去除副作用

     

     

  。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅（计时器            ，或者递归循环）  




  




  
。在组件被摧毁之前

     



     



    ，或者依赖数组的元素更新后












，应该将这些订阅也给摧毁掉  


  


  


。

比如以下的情况（没有去除计时器  
    
    
，增大不必要的开销和代码风险） const [time, setTime] = useState(0) useEffect(() => { const InterVal = setInterval(() => { setTime(time + 1) },1000) },[])

处理在组件被摧毁前去除计时器

const [time, setTime] = useState(0) useEffect(() => { const InterVal = setInterval(() => { setTime(time + 1) },1000) return () => { clearInterval(InterVal ) } },[])

特殊情况处理

useEffect监测不到依赖数组元素的变化
     
     
 。

只有一种可能

     


     


   ，依赖数组元素的地址的值根本就没变 




 




 

，

原因：因为changeA没有真正的改变a在栈中的值（地址的值）  

   

   

，只是改变了a在堆中的值
   




   




   。

useEffect监测不到堆中值得变化

     

     

  ，所有引用类型数据都应该注意这一点 



 



 



。 代码示例: const [a, setA] = useState({ b: dx, c: 18, }) const changeA = () => { setA((old) => { old.b = yx return old }) } useEffect(() => { /** 当组件挂载时执行一次changeA */ changeA () },[]) /**当changeA执行却没有打印 a*/ useEffect(() => { /** 执行逻辑 */ console.log(a) },[a]) 解决的办法 const [a, setA] = useState({ b: dx, c: 18, }) const changeA = () => { setA((old) => { const newA = {...old} newA .b = yx return newA }) } useEffect(() => { /** 当组件挂载时执行一次changeA */ changeA () },[]) /**当changeA执行打印 {b:yx,c:18} */ useEffect(() => { /** 执行逻辑 */ console.log(a) },[a])