"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Qu'est-ce que le rendu JavaScript

Qu'est-ce que le rendu JavaScript

Publié le 2024-08-01
Parcourir:670

La redération 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 un site Web. page à 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éécriture côté client (CSR)
Rendu côté serveur (SSR)
Génération de sites statiques (SSG)

Réédition 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 données du serveur et met à jour dynamiquement le DOM pour afficher le contenu.

syntaxe:

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

`// Importer le hook React et useState
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

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

// 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

Déclaration de sortie Cet article est reproduit sur : https://dev.to/suraj_91/what-is-javascript-rendering-411f?1 En cas de violation, veuillez contacter [email protected] pour le supprimer.
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3