NextJS 快速刷新冻结页面

Question

上下文

我使用 NextJS 和 splt.js 为我的页面创建文本动画。我在渲染函数中有一个

useEffect

初始化

splt({})

函数。

似乎 JSX 的渲染是定时的，所以

splt

函数正在分裂自己。 例如，第一次迭代会接受这个：

['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

并输出：

<span id="c1" class="char" style="display: inline-block; overflow: hidden; vertical-align: top;">H</span><span id="c2" class="char" style="display: inline-block; overflow: hidden; vertical-align: top;">e</span>...

等等。

然后，splt 函数似乎吞噬了自己，它吸收了上面的 HTML，这在多次迭代中成倍地减慢了页面渲染过程。

我试过的

我从

useEffect

返回了一个函数，以便在页面卸载后，我手动将 HTML 重置为空字符串

''

。这仍然会破坏页面，因为现在那里根本没有 HTML。

这是我所拥有的简化版本：

import splt from 'spltjs';
import { useEffect } from 'react';

export default function Random() {

    useEffect(() => {
        console.log(document.querySelector('.splt').innerHTML)

        if (document.querySelector('.splt').innerHTML.length > 1) {
            console.log('splitting the text')
            splt({
                target: '.splt'
            }); 
        } else {
            console.log('no html found')
        }


        return () => {
            document.querySelector('.splt').innerHTML = '';
        }
    }, [])
    return (
        <div className='splt'>Hello world</div>
    )
}