React コンポーネントは、独立した再利用可能なコードです。React コンポーネントはオプションの入力を受け取り、画面にレンダリングされるReact 要素を返します。

React コンポーネントには主に 2 つのタイプがあります。

1. 機能コンポーネントはステートレスです。
2. クラス コンポーネントはステートフルです。

機能コンポーネントは、props を引数として受け取り、react 要素を返す単純な JavaScript 関数です。機能コンポーネントは、他のコンポーネントからのデータを必要とせず、他のコンポーネントと相互作用しません。

機能コンポーネントができること:

1. 小道具を受け入れて使用する
2. データを何らかの形式で表示する (react 要素を返す)

1. 使用するthis.state
2. ライフサイクル メソッドを使用します (例: componentDidmount)。
3. render メソッドを使用する

import React from "react"

const Welcome = props => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  )
}

export default Welcome

これらのコンポーネントは、ES6 のクラス構文を使用して作成されます。これらには、ロジックを含める機能 (onClick イベントを処理するメソッドなど)、ローカル状態 (これについては次の章で詳しく説明します)、および本書の後半のセクションで説明するその他の機能など、いくつかの追加機能があります。

クラス コンポーネントでできること:

1. ES6 クラスを利用Componentし、React でクラスを拡張する
2. 使用するthis.state
3. ライフサイクル メソッドを使用します (例: componentDidmount)。
4. render メソッドを使用する
5. パスの小道具を受け入れ、それらにアクセスするthis.props

import React, {Component} from "react"

class Welcome extends Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
      </div>
    )
  }
}
export default Welcome

次の必要がない限り、常に機能コンポーネントを使用してください。

1. 状態を管理する
2. コンポーネントにライフサイクル メソッドを追加する
3. イベント ハンドラーのロジックを追加する

プレゼンテーション コンポーネント

プレゼンテーション コンポーネントは、props を取得して UI をレンダリングするステートレスな機能コンポーネントと呼ばれることがよくあります。機能コンポーネントと同様に、プレゼンテーション コンポーネントは次のことができません。

1. 使用するthis.state
2. ライフサイクル メソッドを使用します (例: componentDidmount)。
3. render メソッドを使用する

import React from 'react'

const Book = ({ title, img_url }) => (
  <div className="book">
    <img src={ img_url } alt={title}/>
    <h3>{ title }</h3>
  </div>
)

export default Book

コンテナー コンポーネントは、動作部分を処理します。コンテナー コンポーネントは、props を使用して何をレンダリングする必要があるかをプレゼンテーション コンポーネントに伝えます。限定された DOM マークアップとスタイルを含めることはできません。Redux を使用している場合、コンテナー コンポーネントには、アクションをストアにディスパッチするコードが含まれています。または、これは API 呼び出しを配置し​​、結果をコンポーネントの状態に保存する場所です。

コンテナ コンポーネント パターンの簡潔な定義を次に示します。

• コンテナー コンポーネントは、主に物事がどのように機能するかに関係しています。
• ラッピングを除いて、独自の HTML マークアップを持っていることはめったにありません。<div>
• それらはしばしばステートフルです
• データと動作を子 (通常はプレゼンテーション コンポーネント) に提供する責任があります。

class BookList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      books: []
    };
  }

  componentDidMount() {
    fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
      .then(response => response.json())
      .then(bookData => this.setState({ books: bookData.books }))
  }

  renderBooks = () => {
    return this.state.books.map(book => {
      return (
        <div className="book">
          <img src={ book.img_url } />
          <h3>{ book.title }</h3>
        </div>
      )
    })
  }

  render() {
    return (
      <div className="book-list">
        { this.renderBooks() }
      </div>
    )
  }
}

PureComponent

純粋なコンポーネントは、主に最適化を提供するために使用されます。これらは、私たちが作成できる最も単純で最速のコンポーネントです。それらは、そのスコープ外の変数の状態に依存したり変更したりしません。したがって、純粋なコンポーネントが単純な機能コンポーネントを置き換えることができるのはなぜですか。

React.Componentただし、通常の aと aの主な違いの 1 つReact.PureComponentは、純粋なコンポーネントが状態の変化に対して浅い比較を実行することです。純粋なコンポーネントはshouldComponentUpdate()、それ自体で処理します。前のstateand/orpropsが次と同じである場合、コンポーネントは再レンダリングされません。

React.PureComponentはパフォーマンスを最適化するために使用されます。なんらかのパフォーマンスの問題が発生しない限り、使用を検討する理由はありません。

import React from ‘react
class Welcome extends React.PureComponent{
  render(){
    return (
      <div>
        <h1>Welcome!</h1>
      </div>
    )
  }
}
export default Welcome