react-simple-typewriter刷新页面，并重新加载tsParticles

Question

我有一个带有tsParticles的登陆页面在后台运行，我也有一个react-simple-typewriter在运行，每次添加一个字母时它都会刷新页面，这使得粒子每次都刷新，我能做些什么来防止这种情况发生吗?

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import Background from './Background/Background';
import { Typewriter, useTypewriter, Cursor } from 'react-simple-typewriter'

export default function Home() {
const {text} = useTypewriter({
words: ['I'm a full stack developer.'],
loop: 1, // Infinite
})
return (
<div className={styles.container}>
<Background />
<main className={styles.main}>
<h1 className={styles.title}>hero Title</h1>

<h2 className={styles.subtitle}>{text}<Cursor /></h2>
</main>
</div>
)
}

Background.js

import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
const Background = () => {
const particlesInit = async (main) => {
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(main);
};
const particlesLoaded = (container) => {
};
return (
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={
{
"fullScreen": {
"enable": true,
"zIndex": 1
},
"fpsLimit": 120,
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ff0000",
"animation": {
"enable": true,
"speed": 20,
"sync": true
}
},
"opacity": {
"value": 0.5
},
"size": {
"value": {
"min": 0.1,
"max": 3
}
},
"links": {
"enable": true,
"distance": 100,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"outModes": {
"default": "out"
}
}
},
"interactivity": {
"events": {
"onHover": {
"enable": true,
"mode": "repulse"
},
"onClick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"repulse": {
"distance": 200
},
"push": {
"quantity": 4
}
}
},
"detectRetina": true,
"background": {
"color": "#000000"
}
}
}
/>
);
};
export default Background;

任何想法?谢谢。我可以试着把粒子做成画布而不是窗口吗?它真的会产生影响吗?有没有现成的解决办法，因为我见过有这种东西和打字机效果的网站，我应该改变我正在使用的库吗?

Answer 1

所以经过一番研究，我找到了答案，不是整个整个页面刷新，而是组件刷新，所以我没有在刷新组件中使用背景，而是使用另一个组件来包装所有内容，背景组件不会与home组件一起更新。

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import Background from './Background/Background';
import { Typewriter, useTypewriter, Cursor } from 'react-simple-typewriter'

function Home() {
const {text} = useTypewriter({
words: ['I'm a full stack developer.'],
loop: 1, // Infinite
})
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>Itamar Cohen</h1>
<h2 className={styles.subtitle}>{text}<Cursor /></h2>
</main>
</div>
)
}
const Wrapper = () => {
return (
<><Background /><Home /></>
)
}
export default Wrapper;