React 延迟加载 useEffect

Question

我在从 useEffect 获取 clientWidth 时遇到问题。

有一个 lazyLoad 可以加载用户页面。

import {Suspense, lazy} from 'react';

const UsersContainer = lazy (() => import ('./ users / users-container'));

const Index = (props) => {
    return (
        <Suspense fallback = {<div id = {'loading'} />}>
            <UsersContainer />
        </Suspense>
    )
}

export default Index;

UsersContainer 有一个子组件 dataTooltip，如果它不适合块，它会显示完整的用户名。

import React, {useEffect, useRef} from 'react';

import '../common.scss';

const DataTooltip = ({title, ... props}) => {
    let ref = useRef ();

    useEffect (() => {
        if (ref.current.scrollWidth> ref.current.clientWidth) {
            ref.current.setAttribute ('data-tooltip', title)
        }
    });

    return (
        <div ref = {ref} className = {'tooltip'}>
            {
                React.cloneElement (props.children, {ref: ref})
            }
        </div>
    )
}

export default DataTooltip;

有什么问题？

UsersContainer在DOM中加载并渲染后，有'display: none'，同时 DataTooltip 中的 useEffect 是异步触发的。

结果，DataTooltip 说 clientWidth = 0，因为父级有 'display: none'。

lazyLoad 移除 'display: none' 后如何让 useEffect 工作。

PS：useLayoutEffect 也一样，clientWidth = 0

---

这样解决了问题：

<Suspense fallback={<div id={'loading'}/>}>
   <Main/>
   <Acquaintance/>
   <UsersContainer/>
   <RegisterContainer/>
</Suspense>

到

<Suspense fallback={<div id={'loading'}/>}>
    <Main/>
</Suspense> 
            
<Suspense fallback={<div id={'loading'}/>}>
    <Acquaintance/> 
</Suspense>
            
<Suspense fallback={<div id={'loading'}/>}>
    <UsersContainer/>
</Suspense>
            
<Suspense fallback={<div id={'loading'}/>}>
    <RegisterContainer/>
</Suspense>

Answer 1

我不知道这是否能解决您的问题 - 但我立即注意到的一件事是您缺少 useEffect 挂钩中的依赖项数组。

import React, {useEffect, useRef} from 'react';
...

const DataTooltip = ({title, ... props}) => {
    let ref = useRef ();

    useEffect (() => {
        if (ref.current.scrollWidth> ref.current.clientWidth) {
            ref.current.setAttribute ('data-tooltip', title)
        }
    });

    return (...)
}

export default DataTooltip;

应该是：

import React, {useEffect, useRef} from 'react';
...

const DataTooltip = ({title, ... props}) => {
    let ref = useRef ();

    useEffect (() => {
        if (ref.current.scrollWidth> ref.current.clientWidth) {
            ref.current.setAttribute ('data-tooltip', title)
        }
    }, [ref]);

    return (...)
}

export default DataTooltip;

还请记住，这将导致组件在 ref 更改时重新渲染，根据 useEffect 钩子的文档，您应该始终将 useEffect 钩子中使用的上层范围内的任何变量声明为依赖数组，如果您不使用任何此类变量，则仍应传递一个空数组以防止运行无限循环。