ReactJS 組件(Components)

在本章中，我們將學(xué)習(xí)如何組合組件使應(yīng)用程序更容易維護(hù)。這種方法允許在不影響頁面其余部分的情況下更新和更改組件。

無狀態(tài)組件的實(shí)例

下面示例中的第一個(gè)組件是 App。此組件是 Header 和 Content 的所有者。我們正在分別創(chuàng)建 Header 和 Content，并將其添加到我們的 App 組件中的 JSX 樹中。只有應(yīng)用程序組件需要導(dǎo)出。

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

上面的代碼將產(chǎn)生以下結(jié)果。

有狀態(tài)組件的實(shí)例

在這個(gè)實(shí)例中，我們將設(shè)置所有者組件(App)的狀態(tài)。Header 組件是像上一個(gè)實(shí)例中那樣添加的，因?yàn)樗恍枰魏螤顟B(tài)。我們將創(chuàng)建 table 和 tbody 元素，而不是 content 標(biāo)記，在這些元素中，我們將動(dòng)態(tài)地為數(shù)據(jù)數(shù)組中的每個(gè)對(duì)象插入 TableRow。

可以看出，我們使用的EcmaScript 2015箭頭語法（=>）看上去比舊的JavaScript語法干凈得多。這將幫助我們使用更少的代碼行來創(chuàng)建元素。當(dāng)我們需要?jiǎng)?chuàng)建包含很多項(xiàng)目的列表時(shí)，它特別有用。

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 ()函數(shù)。這將有助于 React 只更新必要的元素，而不是在發(fā)生變化時(shí)重新呈現(xiàn)整個(gè)列表。對(duì)于大量動(dòng)態(tài)創(chuàng)建的元素來說，這是一個(gè)巨大的性能提升。