Maison > interface Web > js tutoriel > le corps du texte

Qu'est-ce que le rendu JavaScript

WBOY
Libérer: 2024-07-22 19:40:53
original
541 人浏览过

Redering signifie « obtenir » ou « récupérer » des données. En JavaScript, le rendu fait référence au processus d'affichage de l'interface utilisateur et de ses éléments à l'écran. Ainsi, la redering Javascript fait référence au processus de génération et d'affichage de contenu sur une page Web à l'aide de JavaScript. Cela peut être crucial pour les applications Web dynamiques qui doivent mettre à jour le contenu sans actualiser la page entière.

Approches :
Il existe plusieurs approches pour le redécodage JavaScript :

Révision côté client (CSR)
Rendu côté serveur (SSR)
Génération de sites statiques (SSG)

Révision côté client (CSR) :

Il s'agit d'une approche du développement Web dans laquelle le rendu des pages Web est effectué côté client, essentiellement dans le navigateur Web de l'utilisateur. Ce temps de chargement initial des pages est plus rapide puisque seul un minimum de code HTML est envoyé depuis le serveur. Ainsi, JavaScript récupère les données de le serveur et met à jour dynamiquement le DOM pour afficher le contenu.

syntaxe :

fetch('api/données')
.then(response => réponse.json())
.then(data => {
// Mettre à jour le DOM avec les données
});

`// Importer React et useState hook
importer React, { useState, useEffect } depuis 'react' ;

// Composant fonctionnel pour restituer le contenu après un délai
const DelayedContent = () => {
// Définir l'état pour contenir le contenu
const [content, setContent] = useState(null);

// hook useEffect pour récupérer les données après le montage des composants
useEffect(() => {
// Simulation de la récupération des données d'une API après un délai
const fetchData = async () => {
attendre une nouvelle promesse (resolve => setTimeout (resolve, 2000)); // Simuler un délai de 2 secondes
const data = { message : "Bonjour tout le monde !" };
setContent(data.message); // Définit le contenu une fois les données récupérées
};

fetchData(); // Call the fetchData function
Copier après la connexion

}, []); // Le tableau de dépendances vide garantit que useEffect ne s'exécute qu'une seule fois après le montage des composants

// Renvoie JSX pour restituer le contenu
retour (


{/* Afficher le contenu une fois qu'il est disponible */}
{contenu &&

{contenu}

}

);
} ;

// Exporter le composant DelayedContent
exporter le DelayedContent par défaut ;

vous pouvez l'importer et le restituer dans votre application React :

importer React depuis 'react';
importer ReactDOM depuis 'react-dom' ;
importer DelayedContent depuis './DelayedContent' ;

// Rendre le composant DelayedContent
ReactDOM.render(, document.getElementById('root'));`

What is JavaScript rendering

以上是Qu'est-ce que le rendu JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!