Composants ReactJS (Components)

Dans ce chapitre, nous allons apprendre à combiner les composants pour rendre l'application plus facile à maintenir. Cette méthode permet de mettre à jour et de modifier les composants sans affecter le reste de la page.

Instance de composant sans état

Dans cet exemple, le premier composant est App. Ce composant est le propriétaire de Header et Content. Nous créons séparément Header et Content et les ajoutons à l'arbre JSX de notre composant App. Seul le composant application doit être exporté.

App.jsx

import　React　from　'react';
class App extends React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<Content/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>Content</h2>
　　　　　　　　　　　　<p>The content text!!!</p>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/,　document.getElementById('app'));

Le code suivant produira le résultat suivant.

Instance de composant avec état

dans cet exemple, nous allons définir l'état du composant propriétaire (App). Header Les composants sont ajoutés comme dans l'exemple précédent, car ils n'ont pas besoin d'état. Nous allons créer des éléments table et tbody plutôt que content dans ces éléments, où nous insérons dynamiquement un TableRow pour chaque objet de l'array de données.

On peut voir que nous utilisons des marqueurs EcmaScript 2015L'expression de fonction fléchée (=>) semble beaucoup plus propre que l'ancien langage JavaScript. Cela nous permet d'utiliser moins de lignes de code pour créer des éléments. C'est particulièrement utile lorsque nous devons créer une liste contenant de nombreux éléments.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　constructor()　{　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　
　　　　　　　　　[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":1,
　　　　　　　　　　　　　　　"name":"Foo",
　　　　　　　　　　　　　　　"age":""}20"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":2,
　　　　　　　　　　　　　　　"name":"Bar",
　　　　　　　　　　　　　　　"age":""}30"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":3,
　　　　　　　　　　　　　　　"name":"Baz",
　　　　　　　　　　　　　　　"age":""}40"
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　　　　{this.state.data.map((person,　i)　=>　<TableRow　key　=　{i}　
　　　　　　　　　　　　　　　　　　　　　data　=　{person}　/>)}
　　　　　　　　　　　　　　　</tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　TableRow　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<tr>
　　　　　　　　　　　　<td>{this.props.data.id}</td>
　　　　　　　　　　　　<td>{this.props.data.name}</td>
　　　　　　　　　　　　<td>{this.props.data.age}</td>
　　　　　　　　　</tr>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,　document.getElementById('app'));

Notez que nous avons utilisé key = { i } à l'intérieur de la fonction map(). Cela aidera React à mettre à jour uniquement les éléments nécessaires, plutôt que de réafficher l'ensemble de la liste lors des changements. C'est une amélioration de performance considérable pour un grand nombre d'éléments dynamiquement créés.