React コンポーネント パターンの詳細な紹介 (例付き)

この記事では、React コンポーネント パターンについて詳しく説明します (例を示します)。必要な方は参考にしていただければ幸いです。

コンポーネントは React の中心であるため、優れたデザイン構造を作成するにはコンポーネントの活用方法を知ることが重要です。

コンポーネントとは

React 公式 Web サイトによると、「コンポーネントを使用すると、UI を独立した再利用可能なパーツに分割し、各パーツを個別に管理できます。」

npm install React を初めてインストールすると、コンポーネントとその API が得られます。 JavaScript 関数と同様に、コンポーネントは「props」と呼ばれる入力を受け取り、ユーザー インターフェイス (UI) の外観を記述する (宣言する) React 要素を返します。これが、React が宣言型 API と呼ばれる理由です。UI をどのように見せたいかを指定すると、残りは React が処理するためです。

宣言型スタイルは、タクシーで目的地に行くときのようなものと考えることができます。

運転手に行き先を告げるだけで、運転手はそこまで連れて行ってくれます。命令型プログラミングはその逆で、自分で運転しなければなりません。

コンポーネントのAPI

Reactをインストールすると、Reactが提供するAPIが利用できるようになります。大きく分けて5種類あります。

• #レンダリング

• 状態

• プロップ

• コンテキスト

##ライフサイクル イベント

• ##コンポーネントは上記のすべてを使用できます
API

ただし、コンポーネントは通常、少数の API のみを使用し、他のコンポーネントは他の API のみを使用します。

さまざまな API を使用して、コンポーネントを ステートフル

と

ステートレスの 2 つのタイプに分割できます。

ステートフル コンポーネントは通常、

API
• を使用します: レンダリング、状態、ライフサイクル関連のイベント。
  ステートレス コンポーネントは通常、
API
• : レンダー、プロップ、コンテキストを使用します。

以上が、コンポーネント パターン

を導入したい理由です。コンポーネント パターンは、React を使用する場合のベスト プラクティスです。コンポーネント パターンは、もともとデータ ロジックと UI プレゼンテーション層を分離するために導入されました。コンポーネント間で役割を分担することで、複雑な UI の構成に使用できる、より再利用可能でまとまりのあるコンポーネントを作成できます。これは、スケーラブルなアプリケーションを構築する場合に特に重要です。

#コンポーネント パターン

通常、次のコンポーネント パターンがあります:

#コンテナ (コンテナ コンポーネント)

• プレゼンテーション (表示コンポーネント)

• 高次コンポーネント (高度なコンポーネント)

• レンダリング コールバック (レンダリング コールバック)

• #コンテナ (コンテナ コンポーネント)

「コンテナ コンポーネントはデータを取得して、子コンポーネントをレンダリングするだけです。」 —— Jason Bonta

コンテナ コンポーネントはデータ層またはロジック層であり、ライフサイクル イベントを使用してステートを

redux または Flux のストレージに接続し、データとコールバックを props として渡すことができます。子コンポーネントに渡されます。

コンテナ コンポーネントの render メソッドでは、表示コンポーネントを使用して特定のスタイルをレンダリングできます。すべての状態 API にアクセスするには、関数メソッドを使用するのではなく、コンテナ コンポーネントをクラスとして宣言する必要があります。

以下の例では、Greeting という名前のクラス コンポーネントがあり、状態、ライフサイクル イベント、componentDidMount()、および render メソッドを持っています。

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
        <h1 id="Hello-this-state-name">Hello! {this.state.name}</h1>
      </div>
    );
  }
}

現時点では、コンポーネントはステートフル クラス コンポーネントです。Greeting をコンテナ コンポーネントにするために、以下で説明する UI を表示コンポーネントに分割できます。

表示コンポーネント

表示コンポーネントはプロップ、レンダー、コンテキスト (ステートレス API) を使用します。ライフサイクル関連の API を使用する必要がないため、純粋な関数を使用して記述を簡素化できます。

const GreetingCard = (props) => {
  return (
    <div>
      <h1 id="Hello-props-name">Hello! {props.name}</h1>
    </div>
  )
}

表示コンポーネントは、コンテナ コンポーネント (親コンポーネント) によって提供されるデータとコールバックのみをプロップから受け取ります。

コンテナ コンポーネントとプレゼンテーション コンポーネントは、それぞれデータ/ロジックとプレゼンテーションの部分を独自のコンポーネントにカプセル化します。

const GreetingCard = (props) => {
  return (
    <div>
      <h1 id="props-name">{props.name}</h1>
    </div>
  )
}

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
       <greetingcard></greetingcard>
      </div>
    );
  }
}

如你所见，已经将 Greeting 组件中展示相关的部分移动到了它自己的函数式展示组件中。当然，这是一个非常简单的例子——对于更复杂的应用程序，这也是最基本的。

高阶组件

高阶组件是一种函数，它接受一个组件作为参数，然后返回一个新的组件。

这是一种可以对输入组件的 props 进行修改（增删改查）然后返回全新的修改后的组件强大模式，想想 react-router-v4 和 redux 。用了 react-router-v4 后，你可以使用 withRouter() 来继承以 props 形式传递给组件的各种方法。同样，用了redux，就可以使用 connect({})() 方法来将展示组件和 store 中的数据进行连接。

代码演示：

import {withRouter} from 'react-router-dom';
class App extends React.Component {
  constructor() {
    super();
    this.state = {path: ''}
  }
  
  componentDidMount() {
    let pathName = this.props.location.pathname;
    this.setState(() => {
      return {
        path: pathName,
      }
    })
  }
  
  render() {
    return (
      <div>
        <h1 id="Hi-I-m-being-rendered-at-this-state-path">Hi! I'm being rendered at: {this.state.path}</h1>
      </div>
    )
  }
}

export default withRouter(App);

导出组件时，使用用 react-router-v4 的 withRouter()方法封装它。 在 组件 App 的生命周期事件 componentDidMount() 方法中，我们使用this.props.location.pathname 提供的值来更新 state。 由于我们使用了 withRouter 高阶组件，我们可以直接访问 this.props.locationlocation，而不需要直接将 location 作为 props 直接传入，非常方便。

渲染回调

与高阶组件类似，渲染回调或渲染 props 被用于共享或重用组件逻辑。虽然许多开发人员倾向于使用 高阶组件 的可重用逻辑，但是使用 渲染回调 仍然有一些非常好的理由和优势——这是在 Michael Jackson 的“永不写另一个高阶组件”中得到了最好的解释。简而言之，渲染回调减少了命名空间冲突，并更好的说明了逻辑来源。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState(prevState => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  render() {
    return (
      <div>{this.props.children(this.state)}</div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <counter>
        {state => (
          <div>
            <h1 id="The-count-is-state-count">The count is: {state.count}</h1>
          </div>
        )}
      </counter>
    );
  }
}

在 Counter 类中，在 render 方法中嵌入 this.props.children 并将 this.state 作为参数。在 App 类中，我们可以将我们组件封装在 Counter 组件中，因此我可以操作 Counter 组件内的逻辑。

Counter 组件的本质是暴露了 children 这个外部属性，将 children 具体的渲染细节交个 Counter 的使用者，使用的时候只需要将组件传入到 Counter 的 children 中，当然可以使用其他参数，如果 children 不够的话。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

以上がReact コンポーネント パターンの詳細な紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。