CSS styles 應用於 React 生命周期的哪一點？

Question

我試圖了解哪個生命周期點 CSS styles 開始適用於 DOM 元素。

遇到一個問題，我需要在應用所有 styles 后獲取元素的clientWidth 。 我的測試表明我不能依賴useEffect鈎子，因為我得到的結果不一致。

我使用一個簡單的<did/>元素對其進行測試，該元素應該采用完整的父寬度（網格容器）。

const divRef = useRef()

useEffect(() => {
    console.log(divRef.current.clientWidth)    
})

<div class="parent">
    <div ref={divRef} class="child" />
</div>

我希望寬度 === 280 像素，但大多數時候（比如說）980 像素。 如果我將console.log放入timeout中，一切都會按預期開始工作。 顯然useEffect在應用 styles 之前運行。

有人可以為我澄清如何獲得可靠的結果嗎？

Answer 1

您可以使用 useEffect 的第二個參數來跟蹤變量的值。

const divRef = useRef()
const [divWidth, setDivWidth] = React.useState('');

useEffect(() => {
    setDivWidth(divRef.current.clientWidth)    
}, [divWidth]) // Only re-run the effect if divWidth changes

我還發現了另一個可能對您有所幫助的 StackOverflow 問題：

如何獲取反應元素的寬度

Answer 2

React 並沒有真正參與到 CSS 中，而不是向 DOM 屬性發出class和style屬性。 它永遠不會“應用” CSS，實際上您可能的意思可能是 DOM 中可能發生的一堆事情的集合：

• 新的 styles 從加載的樣式表生效
• 由於 window 調整大小，布局發生變化
• 由於應用了 fonts 而發生回流

請參閱什么強制布局/回流來了解 scope。

遺憾的是，HTML 沒有針對元素布局更改或回流發生時的 DOM 事件，因此如果您需要獲取元素尺寸，則必須對其進行修改。 一種簡單的技術是定期檢查 DOM 元素尺寸的輪詢循環。 如果您不想連續輪詢，您可以在一段時間后切斷輪詢器並添加 window resize 事件偵聽器來調整尺寸

function YourComponent() {
  const [width, setWidth] = useState(0);
  const divRef = useRef(null);

  function checkWidth() {
    if (divRef.current && divRef.current.clientWidth !== width) {
      setWidth(divRef.current.clientWidth);
    }
  }

  useEffect(() => {
    const interval = setInterval(checkWidth, 1000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    window.addEventListener('resize', checkWidth);
    return () => window.removeEventListener('resize', checkWidth);
  }, []);

  return (
    <div ref={divRef}>
      ...
    </div>
  );
}