ReactJS-コンポーネント

この章では、コンポーネントを組み合わせてアプリのメンテナンスを容易にする方法を学習します。このアプローチにより、ページの他の部分に影響を与えることなく、コンポーネントを更新および変更できます。

ステートレスの例

次の例の最初のコンポーネントは App。このコンポーネントはの所有者ですHeader そして Content。私たちは作成していますHeader そして Content 個別に、JSXツリー内に追加するだけです App成分。のみ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コンポーネントは状態を必要としないため、最後の例のように追加されます。contentタグの代わりに、table そして tbody 動的に挿入する要素 TableRow からのすべてのオブジェクトに対して data アレイ。

古いJavaScript構文よりもはるかにクリーンに見えるEcmaScript2015矢印構文（=>）を使用していることがわかります。これにより、少ないコード行で要素を作成できます。たくさんのアイテムを含むリストを作成する必要がある場合に特に便利です。

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

Note −使用していることに注意してください key = {i} inside map()関数。これにより、Reactは、何かが変更されたときにリスト全体を再レンダリングするのではなく、必要な要素のみを更新することができます。これは、動的に作成される要素の数が多いほど、パフォーマンスが大幅に向上します。