React开发教程6：组件Components

本教程由好办法汇总原创。

这一篇教程将指引你如何使用组件开发网页。
组件的方法将使你不需要改变页面其他部分，就可以更新和改变局部。

无状态组件（Stateless）范例

我们在下面例子中的第一个组件叫 App。 这个组件是 Header 和 Content 的拥有者。我们可以单独创建 Header 和 Content 并把它们添加到我们的 App 组件JSX树中。最后只要输出 App 组件就可以被外部调用。

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 中调用 reactDOM.render() 才能在App才能渲染在页面上。

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

上述代码的效果如下图：

 

有状态（Stateful）的组件例子

这一个例子中我们的状态组件叫 (App)。 Header 和上面例子一样。这里我们创建 table 和 tbody 元素动态地把data 数列中的每一个对象输入到 TableRow 中。我们这里使用 EcmaScript 2015 的语法，例如箭头arrow (⇒)。这比标准的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'));

注意

这里我们map() 方程中使用了 key = {i} 。这就让React在数据变化时，可以只用更新某些元素而不是渲染整个list。 这大大提升了处理大量数据、添加做动态元素的性能。