Reactjs 组件将装入时添加css类

当一个

模态

打开时，我向

主体

元素添加了一些类

const Modal = ({ ... }) => {
    ...
    useEffect(() => {
        document.body.classList.add('modal-open')
        return () => document.body.classList.remove('modal-open')
    }, [])

但是我注意到在应用

模式打开

类时有一个快速而短暂的延迟（特别是当这个类包含一些样式时，比如

右边距：17px

，

溢出-y:hidden

和

位置：sticky！重要

）因此我看到

body

元素在移动，这当然不是一个好的用户体验

因此，我将添加类移出了

useffect

document.body.classList.add('modal-open')
useEffect(() => { ... }, [])

它正在工作，但这一行代码

document.body.classList.add（'modal-open'）

在每次重新渲染时都会执行，而不仅仅是在

useffect

document.body.classList.add('modal-open')
useEffect(() => { ... }, [])

那么有更好的方法吗？可能

组件将在钩子中装载

等价物，因为我没有触及状态，我只是在操作dom元素类？

可以代替

useffect

更早地应用更改

签名与useEffect相同，但它是同步激发的 毕竟DOM突变。使用此选项可以从DOM和 同步重新渲染。在useLayoutEffect中计划的更新将 在浏览器有机会绘制之前同步刷新

试试看，谢谢@UjinT34它确实有用；）如果你愿意，你可以写一个被接受的答案。。。我也觉得这篇文章很有用