ReactJS元件

在本章中，我們將學習如何組合元件以使應用程式更易於維護。 這種方法允許更新和更改元件，而不會影響頁面的其餘部分。

無狀態範例

下例中的第一個元件是App。 此元件是標題和內容的所有者。這裡分別建立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()。 在設定環境的時候就已經這樣做了。

檔案：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;

注意 - 注意我們在map()函式中使用key = {i}。 這將有助於React更新只有必要的元素，而不是在發生更改時重新呈現整個列表。 對於大量動態建立的元素來說，這是一個巨大的效能提升。得到以下結果 -