Componentes de ReactJS (Components)

En este capítulo, aprenderemos cómo combinar componentes para que la aplicación sea más fácil de mantener. Este método permite actualizar y cambiar componentes sin afectar el resto de la página.

instancia de componente sin estado

En el siguiente ejemplo, el primer componente es App. Este componente es el propietario de Header y Content. Estamos creando Header y Content por separado y los estamos añadiendo al árbol JSX de nuestro componente App. Solo el componente de aplicación necesita exportarse.

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'));

El código anterior producirá el siguiente resultado.

instancia de componente con estado

en este ejemplo, estableceremos el estado del componente propietario (App). Header El componente se agrega de la misma manera que en el ejemplo anterior, ya que no necesita ningún estado. Crearemos elementos table y tbody en lugar de content etiquetas, en las que insertaremos dinámicamente un TableRow para cada objeto del array de datos.

Se puede ver que estamos utilizando EcmaScript 2015La sintaxis de flecha (=>) parece mucho más limpia que la sintaxis antigua de JavaScript. Esto nos ayudará a crear elementos con menos líneas de código. Es especialmente útil cuando necesitamos crear listas que contengan muchos elementos.

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"
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}　　　render()　{
　　　　　　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'));

Tenga en cuenta que hemos utilizado key = { i } dentro de la función map(). Esto ayudará a React a actualizar solo los elementos necesarios, en lugar de renderizar toda la lista cuando发生变化。Para una gran cantidad de elementos dinámicamente creados, representa una mejora en el rendimiento significativa.