美文网首页
Layout Hook

Layout Hook

作者: percykuang | 来源:发表于2020-05-24 10:27 被阅读0次

    LayoutEffect Hook

    浏览器的页面大致渲染过程:

    对DOM进行了改动(同步代码) => 浏览器下一次渲染时间点到达 => 对比差异,进行渲染(异步)=> 用户看到新的效果

    useEffect: 浏览器渲染完成后,用户看到新的效果后

    useLayoutEffect:完成了DOM改动,但还没有呈现给用户。和useEffect的用法没有任何区别,

    唯一的区别就是运行的时间点不同。

    应该尽量使用useEffect,因为它不会导致渲染阻塞,如果出现了问题,再考虑useLayoutEffect

    useLayoutEffect.png
    import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
    
    const App = () => {
    
      const [count, setCount] = useState(0)
      const h1Ref = useRef()
    
      // 使用useEffect时 在内部用ref操作元素DOM时 有可能导致页面一进来会先闪现 0 再 变为 random值
      // useEffect(() => {
      //   h1Ref.current.innerText = Math.random().toFixed(2)
      // })
      useLayoutEffect(() => {
        h1Ref.current.innerText = Math.random().toFixed(2)
      })
    
      return (
        <div>
          <h1 ref={h1Ref}>{count}</h1>
          <button onClick={() => setCount(count + 1)}>+</button>
        </div>
      )
    }
    
    export default App
    

    相关文章

      网友评论

          本文标题:Layout Hook

          本文链接:https://www.haomeiwen.com/subject/dbydahtx.html