Rumah > Artikel > hujung hadapan web > Apakah pemaparan JavaScript
Redering bermaksud 'mendapatkan' atau 'mengambil' data.Dalam JavaScript, rendering merujuk kepada proses memaparkan antara muka pengguna dan elemennya pada skrin.Jadi, redering Javascript merujuk kepada proses menjana dan memaparkan kandungan pada web halaman menggunakan JavaScript. Ini boleh menjadi penting untuk aplikasi web dinamik yang perlu mengemas kini kandungan tanpa memuat semula keseluruhan halaman.
Pendekatan:
Terdapat beberapa pendekatan untuk penyahkodan semula JavaScript:
Penyelesaian Sebelah Pelanggan(CSR)
Paparan Bahagian Sebelah (SSR)
Penjanaan Tapak Statik (SSG)
Penyelesaian Sebelah Pelanggan(CSR):
Ini ialah pendekatan kepada pembangunan web di mana pemaparan halaman web dilakukan pada bahagian klien, pada asasnya dalam penyemak imbas web pengguna. Masa pemuatan halaman awal yang lebih pantas kerana hanya HTML minimum dihantar dari pelayan. Jadi, JavaScript mengambil data daripada pelayan dan mengemas kini DOM secara dinamik untuk memaparkan kandungan.
sintaks:
fetch('api/data')
.then(respons => response.json())
.then(data => {
// Kemas kini DOM dengan data
});
`// Import React and useState hook
import React, { useState, useEffect } daripada 'react';
// Komponen berfungsi untuk memaparkan kandungan selepas kelewatan
const DelayedContent = () => {
// Tentukan keadaan untuk menahan kandungan
const [kandungan, setContent] = useState(null);
// useEffect hook untuk mengambil data selepas komponen dipasang
useEffect(() => {
// Mensimulasikan pengambilan data daripada API selepas kelewatan
const fetchData = async () => {
tunggu Janji baru(selesaikan => setTimeout(selesaikan, 2000)); // Simulasikan kelewatan selama 2 saat
const data = { mesej: "Helo, dunia!" };
setContent(data.message); // Tetapkan kandungan selepas data diambil
};
fetchData(); // Call the fetchData function
}, []); // Tatasusunan pergantungan kosong memastikan useEffect berjalan sekali sahaja selepas komponen dipasang
// Kembalikan JSX untuk memaparkan kandungan
kembali (
// Eksport komponen DelayedContent
eksport DelayedContent lalai;
anda boleh mengimportnya dan memaparkannya dalam apl reaksi anda:
import React daripada 'react';
import ReactDOM daripada 'react-dom';
import DelayedContent daripada './DelayedContent';
// Render komponen DelayedContent
ReactDOM.render(, document.getElementById('root'));`
Atas ialah kandungan terperinci Apakah pemaparan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!