ReactJS 组件(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 ()函数。这将有助于 React 只更新必要的元素，而不是在发生变化时重新呈现整个列表。对于大量动态创建的元素来说，这是一个巨大的性能提升。