ReactJS компонenty (Components)

在本章中，我们将学习如何组合组件使应用程序更容易维护。这种方法允许在不影响页面其余部分的情况下更新和更改组件。

无状态组件的实例

下面示例中的第一个组件是 App。此组件是 Header 和 Content 的所有者。我们正在分别创建 Header 和 Content，并将其添加到我们的 App 组件中的 JSX 树中。只有应用程序组件需要导出。

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

上面的代码将产生以下结果。

有状态组件的实例

在这个实例中，我们将设置所有者组件(App)的状态。Header 组件是像上一个实例中那样添加的，因为它不需要任何状态。我们将创建 table 和 tbody 元素，而不是 content 标记，在这些元素中，我们将动态地为数据数组中的每个对象插入 TableRow。

可以看出，我们使用的EcmaScript 2015箭头语法（=>）看上去比旧的JavaScript语法干净得多。这将帮助我们使用更少的代码行来创建元素。当我们需要创建包含很多项目的列表时，它特别有用。

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

Обратите внимание, что мы используем key = { i } inside map () function. Это поможет React обновлять только необходимые элементы, а не перерисовывать весь список при изменениях. Это巨大的性能 улучшение для большого количества динамически созданных элементов.