React:プレゼンテーションコンポーネントとコンテナコンポーネント

Reactのプレゼンテーションコンポーネントとコンテナコンポーネントの違い

Reactでは、コンポーネントは2つの大きなバケットに分割されることがよくあります。プレゼンテーションコンポーネントそしてコンテナコンポーネント

それぞれに独自の特徴があります。

プレゼンテーションコンポーネントは、主に、出力されるマークアップの生成に関係しています。

プレゼンテーションに関連する状態を除いて、どのような状態も管理しません。

コンテナコンポーネントは、主に「バックエンド」操作に関係しています。

それらは、さまざまなサブコンポーネントの状態を処理する場合があります。それらは、いくつかのプレゼンテーションコンポーネントをラップする場合があります。彼らはとインターフェースするかもしれません戻ってきた

区別を簡単にする方法として、私たちは言うことができますプレゼンテーションコンポーネントは外観に関係していますコンテナコンポーネントは、物事を機能させることに関係しています

たとえば、これはプレゼンテーションコンポーネントです。小道具からデータを取得し、要素の表示に焦点を合わせます。

const Users = props => (
  <ul>
    {props.users.map(user => (
      <li>{user}</li>
    ))}
  </ul>
)

一方、これはコンテナコンポーネントです。独自のデータを管理および保存し、プレゼンテーションコンポーネントを使用してデータを表示します。

class UsersContainer extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }

componentDidMount() { axios.get(’/users’).then(users => this.setState({ users: users })) ) }

render() { return <Users users={this.state.users} /> } }

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: