Question

当body打开时，我向Modal元素添加了一些类

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

但是我注意到应用modal-open类时会出现短暂而短暂的延迟（尤其是当此类包含margin-right: 17px，overflow-y: hidden和position: sticky !important之类的样式时）我看到body元素在移动，这当然不是良好的用户体验。

所以我将类添加到useEffect

中

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

它可以正常工作，但是在每次重新渲染时都执行此行代码document.body.classList.add('modal-open')，而不仅仅是在useEffect中执行一次

那么有更好的方法吗？也许componentWillMount等价于钩子会导致我没有达到仅操作dom元素类的状态？

Answer 1

useLayoutEffect可以代替useEffect来更早地应用更改。

签名与useEffect相同，但是它同步触发在所有DOM突变之后。使用它从DOM中读取布局，并同步重新渲染。在useLayoutEffect内部安排的更新将在浏览器有机会绘画之前被同步刷新。

组件安装时添加CSS类

1 个答案: