Kod js akan terus berjalan walaupun elemen dialih keluar daripada halaman.
Gunakan kod react-js 编码时的第一个困难。因为页面没有重新加载，所以初始脚本仍在运行，如 setInterval、websocket、etc. Contoh mudah di bawah telah mengeluarkan elemen tetapi masih berjalan. Ia tidak berfungsi jika saya perlu mencipta menggunakan pembolehubah global
<button onclick="createNewJsCode()">create new js</button>
<button onclick="removeJsCode()">remove js</button>
<script>
let id = ''
function createNewJsCode(){
let s = document.createElement('script')
let code = 'setInterval(`console.log(new Date())`,500)'
s.id = (id = crypto.randomUUID())
s.appendChild(document.createTextNode(code));
document.body.appendChild(s);
}
function removeJsCode(){
document.getElementById(id).remove()
}
</script>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda tidak boleh memadamkan
<script>nod sahaja, anda perlu melakukan pembersihan yang lebih khusus.setInterval返回一个间隔 ID，您可以将其传递给clearIntervaluntuk menghentikannya.Secara amnya, saya akan katakan kod anda tidak begitu masuk akal dalam konteks React, tetapi dalam kes anda, anda boleh melakukan ini:
Ini ialah soalan React, berikut adalah contoh penggunaan
setIntervaldalam komponen React. Jika anda menggunakan beberapa bentuk React Router, kod di bawah juga akan menyahpasang/memasang dsb dengan betul.const {useState, useEffect} = React; function Page() { const [counter, setCounter] = useState(0); useEffect(() => { const i = setInterval(() => { console.log(new Date()); setCounter(c => c +1); }, 1000); return () => { console.log('umount'); clearInterval(i); } }, []); return
This is a page, and when unmounted will end the setInterval.
}
function OtherInfo() {
return
Notice how the timer stopped inside the console.
}
function App() {
const [pageVis, setPageVis] = useState(true);
return
{pageVis &&
}
const root = ReactDOM.createRoot(document.querySelector('#mount'));
root.render(Counter: {counter}, time: {new Date().toLocaleString()}
Check console you will also see console logging of datetime finishes.
If you click Show Page the component will be mounted again, this is kind of the basis of how React Router works in a Single Page Application (SPA).
{pageVis && } {!pageVis && }