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后使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 挂钩中使用的上层作用域中的任何变量声明为依赖项的一部分数组，如果您不使用任何此类变量，您应该仍然传递一个空数组以防止运行无限循环。