亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【九月打卡】第15天 2022升級 React18+TS高仿AntD從零到一打造組件庫

標簽:
Html5

课程章节: 第6章 更上一层楼 - 完成 Menu 组件

主讲老师:张轩

课程内容:

今天学习的内容包括:

6-10 完美组件 - SubMenu 组件添加测试

课程收获:

React Hook中useState更新延迟
错误实例

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, 在useEffect内监听此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中转,并实时同步给useState

const [currentIndex, setCurrentIndex] = useState(0)
const currentIndexRef = useRef(0);
  const handleLeft = () => {
     currentIndexRef.current += 1
     console.log(currentIndexRef.current)
  }
useEffect(()=>{
    setCurrentIndex(currentIndexRef.current)
},[currentIndexRef.current])
點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
9
獲贊與收藏
1

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消