React Hook中useState更新延迟问题

方法一:  去掉useEffect的第二个参数

例如以下代码 错误实例

   
   

     
     

      
      

     
     
     
     

      
      

       
       const[zoom, setZoom] = useState(
       
       0);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       useEffect(() = >{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       document.getElementById(
       
       'workspace-content').addEventListener(
       
       'mousewheel', scrollFunc);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       },[]);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       function scrollFunc(e) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           setZoom(zoom + 
       
       5)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

会出现zoom永远等于 0+5, 而不是所谓的5, 10 ,15 为什么会这样呢? 因为useEffect执行时，会创建一个闭包，在每次监听到mousewheel运行时 闭包内部保存了zoom的初始化值 每次调用的时候都是取的初始化值0 所有会一直为0+5

怎么解决呢?

解决方案: 去掉useEffect中的空数组即可

   
   

     
     

      
      

     
     
     
     

      
      

       
       const[zoom, setZoom] = useState(
       
       0);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       useEffect(() = >{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       document.getElementById(
       
       'workspace-content').addEventListener(
       
       'mousewheel', scrollFunc);
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       return () = >
       
       document.getElementById(
       
       'workspace-content').removeEventListener(
       
       "mousewheel", scrollFunc); 
       
       // 记得解绑事件
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       });
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       function scrollFunc(e) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           setZoom(zoom + 
       
       5)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

方法二: 将改变函数移入useEffect并将第二个参数设置为state

依旧用上面的例子

解决方法: 正确示例

   
   

     
     

      
      

     
     
     
     

      
      

       
       useEffect(() = >{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       document.getElementById(
       
       'workspace-content').addEventListener(
       
       'mousewheel', scrollFunc);
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       return () = >
       
       document.getElementById(
       
       'workspace-content').removeEventListener(
       
       "mousewheel", scrollFunc);
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       function scrollFunc(e) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               setZoom(zoom + 
       
       5) e.preventDefault()
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       },[zoom]);
      
      
     
     
   
   

方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量

例如下面的代码 错误示例

   
   

     
     

      
      

     
     
     
     

      
      

       
       const [currentIndex, setCurrentIndex] = useState(
       
       0)
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       const handleLeft = 
       
       () => {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
            setCurrentIndex(currentIndex+ 
       
       1)
      
      
     
     

     
     

      
      

     
     
     
     

      
      
     
       
       console.log(currentIndex)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     
   
   

初始化currentIndex为0 每次执行handleLeft函 数是让currentIndex加1, 之后立即获取currentIndex的值发现 第一次执行currentIndex = 0

第二次执行currentIndex = 1 每次都跟实际情况差一个  查阅资料发现useState必须要执行完react整个生命周期才会获取最新值

解决方案: 用useRef代替

   
   

     
     

      
      

     
     
     
     

      
      
 
       
       const currentIndexRef = useRef(
       
       0); 
       
       // 不能用useState 会导致数据更新不及时
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       const handleLeft = 
       
       () => {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
            currentIndexRef.current += 
       
       1
      
      
     
     

     
     

      
      

     
     
     
     

      
      
     
       
       console.log(currentIndexRef.current)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }