Quelle est la méthode Render () dans les composants de la classe React?

Quelle est la méthode Render () dans les composants de la classe React?

La méthode render() est une partie cruciale des composants de la classe React. Il s'agit d'une méthode requise que chaque composant de classe doit implémenter. La fonction principale de la méthode render() est de décrire ce que le composant doit afficher, en fonction de son état actuel et de ses accessoires. Lorsque l'état ou les accessoires d'un changement de composant, React appellera la méthode render() pour déterminer si l'interface utilisateur doit être mise à jour.

Voici un exemple de base d'un composant de classe avec une méthode render() :

 <code class="javascript">import React, { Component } from 'react'; class ExampleComponent extends Component { render() { return <div>Hello, {this.props.name}!</div>; } } export default ExampleComponent;</code>

Dans cet exemple, la méthode render() renvoie JSX qui réagira pour construire et mettre à jour le DOM. La méthode render() est appelée chaque fois que l'état ou les accessoires du composant change, permettant au composant de renvoyer avec les nouvelles données.

À quel point la méthode render () revient en réact?

La méthode render() dans React doit retourner l'un des types suivants:

1. Éléments de react : ceux-ci peuvent être créés via JSX ou en appelant React.createElement() . Par exemple:

    <code class="javascript">return <div>Hello, World!</div>;</code>

2. Arrays et fragments : ceux-ci vous permettent de retourner plusieurs éléments. Par exemple:

    <code class="javascript">return [ <li key="A">First item</li>, <li key="B">Second item</li>, <li key="C">Third item</li> ];</code>

   Ou en utilisant un fragment:

    <code class="javascript">return ( <react.fragment> <li>First item</li> <li>Second item</li> <li>Third item</li> </react.fragment> );</code>

3. Portails : Ceux-ci permettent de rendre les enfants dans un sous-arbre Dom différent. Par exemple:

    <code class="javascript">return ReactDOM.createPortal( <div>This is rendered in a different part of the DOM</div>, document.getElementById('modal-root') );</code>

4. String et nombres : ceux-ci sont rendus sous forme de nœuds de texte. Par exemple:

    <code class="javascript">return 'Hello, World!';</code>

5. Booléens ou nuls : ceux-ci entraînent que rien ne soit rendu. Par exemple:

    <code class="javascript">return null;</code>

Il est important de noter que la méthode render() doit être pure, ce qui signifie qu'elle ne doit pas modifier l'état du composant, ni interagir directement avec le navigateur. Tous les effets secondaires doivent être gérés par des méthodes de cycle de vie ou des crochets.

En quoi la méthode Render () diffère-t-elle dans les composants de la fonction?

Les composants de fonction dans React n'utilisent pas la méthode render() comme le font les composants de classe. Au lieu de cela, les composants de fonction sont eux-mêmes l'équivalent de la méthode render() dans les composants de classe. Ce sont des fonctions pures qui acceptent props comme un argument et renvoient des éléments de réaction décrivant ce qui doit être affiché.

Voici un exemple de composant de fonction:

 <code class="javascript">import React from 'react'; function ExampleComponent(props) { return <div>Hello, {props.name}!</div>; } export default ExampleComponent;</code>

Les principales différences sont:

• Syntaxe : les composants de la fonction utilisent la syntaxe de la fonction, tandis que les composants de classe utilisent la syntaxe de classe.
• État et cycle de vie : les composants de la classe peuvent utiliser des méthodes de cycle de vie et gérer l'état local avec this.state . Les composants de la fonction, avant l'introduction de crochets, n'ont pas pu gérer l'état local ni utiliser des méthodes de cycle de vie. Avec les crochets (introduits dans React 16.8), les composants de la fonction peuvent gérer l'état et le cycle de vie via useState et useEffect des crochets d'effet.
• Performance : les composants de la fonction peuvent être plus concis et potentiellement plus performants, en particulier lors de l'utilisation de crochets, car ils évitent les frais généraux des instances de classe.

Voici un exemple utilisant des crochets dans un composant de fonction:

 <code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onclick="{()"> setCount(count 1)}>Click me</button> </div> ); } export default ExampleComponent;</code>

Les méthodes de cycle de vie peuvent-elles être utilisées dans la méthode Render ()?

Non, les méthodes de cycle de vie ne doivent pas être utilisées dans la méthode render() . La méthode render() doit être pure et exempte d'effets secondaires. Les méthodes de cycle de vie, telles que componentDidMount , componentDidUpdate et componentWillUnmount , sont conçues pour gérer les effets secondaires et doivent être utilisées en dehors de la méthode render() .

Par exemple, si vous souhaitez récupérer des données lorsqu'un composant monte, vous utiliseriez componentDidMount dans un composant de classe:

 <code class="javascript">import React, { Component } from 'react'; class ExampleComponent extends Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { // Fetch data here fetch('/api/data') .then(response => response.json()) .then(data => this.setState({ data })); } render() { return ( <div> {this.state.data ? ( <div>Data: {this.state.data}</div> ) : ( <div>Loading...</div> )} </div> ); } } export default ExampleComponent;</code>

Dans les composants de la fonction, vous utiliseriez le crochet useEffect pour obtenir le même résultat:

 <code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [data, setData] = useState(null); useEffect(() => { // Fetch data here fetch('/api/data') .then(response => response.json()) .then(data => setData(data)); }, []); // Empty dependency array means this effect runs once on mount return ( <div> {data ? <div>Data: {data}</div> : <div>Loading...</div>} </div> ); } export default ExampleComponent;</code>

Dans les deux cas, la logique réelle de données de données est maintenue en dehors de la méthode render() pour maintenir sa pureté et empêcher les redesseurs inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!