Javascript CSS样式在生命周期中应用于哪一点？

我试图了解CSS样式开始应用于DOM元素的生命周期点

遇到一个问题，我需要在应用所有样式后获取元素的

clientWidth

。我的测试表明我不能依赖

useffect

hook，因为我得到的结果不一致

我用一个简单的

元素来测试它，它应该是全父宽度（网格容器）

const divRef=useRef（）
useffect（（）=>{
console.log（divRef.current.clientWidth）
})

我期望宽度===280px，但大多数情况下都是980px。 如果我将

console.log

放入

timeout

中，一切都会按预期开始工作。显然

useffect

在应用样式之前运行

---

有人能为我澄清一下如何得到可靠的结果吗？

你可以使用useffect的第二个参数来跟踪变量的值

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

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

我还发现了另一个可能对您有所帮助的问题：

---

您可以使用useEffect的第二个参数来跟踪变量的值

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

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

我还发现了另一个可能对您有所帮助的问题：

---

React实际上与CSS的关系并不比向DOM属性发出

class

和

style

属性更多。它从不“应用”CSS，实际上您可能指的是DOM中可能发生的一系列事情的聚合：

• 从已加载的样式表生效的新样式
• 由于调整窗口大小而更改布局
• 由于应用字体而发生回流

请查看以了解此操作的范围

遗憾的是，当元素的布局发生变化或出现回流时，HTML没有DOM事件，所以如果需要获取元素维度，就必须破解它。一种简单的技术是轮询循环，它定期检查DOM元素的维度。如果不想连续轮询，可以在一段时间后切断轮询器，并添加一个窗口调整事件侦听器来调整维度

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>
  );
}

函数组件（）{
const[width，setWidth]=useState（0）；
const divRef=useRef（null）；
函数checkWidth（）{
if（divRef.current&&divRef.current.clientWidth！==宽度）{
setWidth（divRef.current.clientWidth）；
}
}
useffect（（）=>{
const interval=setInterval（checkWidth，1000）；
return（）=>clearInterval（interval）；
}, []);
useffect（（）=>{
window.addEventListener（'resize'，checkWidth）；
return（）=>window.removeEventListener（'resize'，checkWidth）；
}, []);
返回(
...
);
}

React与CSS的关系并不比向DOM属性发出

class

和

style

属性更多。它从不“应用”CSS，实际上您可能指的是DOM中可能发生的一系列事情的聚合：

• 从已加载的样式表生效的新样式
• 由于调整窗口大小而更改布局
• 由于应用字体而发生回流

请查看以了解此操作的范围

遗憾的是，当元素的布局发生变化或出现回流时，HTML没有DOM事件，所以如果需要获取元素维度，就必须破解它。一种简单的技术是轮询循环，它定期检查DOM元素的维度。如果不想连续轮询，可以在一段时间后切断轮询器，并添加一个窗口调整事件侦听器来调整维度

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>
  );
}

函数组件（）{
const[width，setWidth]=useState（0）；
const divRef=useRef（null）；
函数checkWidth（）{
if（divRef.current&&divRef.current.clientWidth！==宽度）{
setWidth（divRef.current.clientWidth）；
}
}
useffect（（）=>{
const interval=setInterval（checkWidth，1000）；
return（）=>clearInterval（interval）；
}, []);
useffect（（）=>{
window.addEventListener（'resize'，checkWidth）；
return（）=>window.removeEventListener（'resize'，checkWidth）；
}, []);
返回(
...
);
}

您的效果究竟需要等待什么？例如，一个100%宽度的元素由于页面大小调整而改变DOM中的大小完全不在React的控制范围内，但您可以监听该页面大小调整。您希望等待的具体效果是什么？例如，一个100%宽度的元素由于页面大小调整而改变DOM中的大小完全不在React的控制范围内，但是您可以监听该页面大小调整。