web-dev-qa-db-ja.com

React：ES6クラスベースのコンポーネントと機能的なES6コンポーネントを使用する場合

Reactの学習に時間を費やした後、コンポーネントを作成する2つの主なパラダイムの違いを理解しました

私の質問は、いつどのようなものを使用すべきか、そしてなぜですか？一方の利点と他方の利点のトレードオフは何ですか？

ES6/7クラス：

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

機能的：

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

私はそのコンポーネントによって操作される状態がないときはいつでも機能していると考えています...しかしそれはそれですか？

ライフサイクルメソッドを使用する場合、クラスベースのコンポーネントを使用するのが最善かもしれません。

javascriptreactjsecmascript-6redux
142
JordanHendrix

あなたは正しい考えを持っています。コンポーネントがいくつかの小道具を取り込んでレンダリングする以上のことをしない場合は、機能を使用します。これらは純粋な関数と考えることができます。なぜなら、同じ小道具が与えられた場合、それらは常に同じようにレンダリングおよび動作するからです。また、ライフサイクルメソッドを気にせず、独自の内部状態を持ちません。

軽量であるため、これらの単純なコンポーネントを機能コンポーネントとして記述することは非常に標準的です。

コンポーネントに状態の保持などの機能が必要な場合は、代わりにクラスを使用します。

詳細： https://facebook.github.io/react/docs/reusable-components.html#es6-classes

105
Jeff Cousins

可能な場合は常に、ステートレス機能（機能コンポーネント）を使用するようにしてください。通常のReactクラスを使用する必要があるシナリオがあります。

  • コンポーネントは状態を維持する必要があります
  • コンポーネントの再レンダリングが多すぎるため、shouldComponentUpdateを介して制御する必要があります
  • コンテナコンポーネント が必要です

更新

現在、（PureComponentの代わりに）拡張できるComponentというReactクラスがあり、独自のshouldComponentUpdateを実装して、浅い小道具の比較を処理します。 続きを読む

34
ffxsam

2019年3月更新

https://overreacted.io/how-are-function-components-different-from-classes/

2019年2月更新：

React hooks の導入により、Reactチームは可能な限り機能コンポーネントを使用することを望んでいるように見えます（JavaScriptの機能的性質の方が優れています）。

彼らの動機：

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

フックを備えた機能コンポーネントは almost クラスコンポーネントが実行できるすべてを実行できます。上記の欠点はありません。

できるだけ早く使用することをお勧めします。

元の回答

機能コンポーネントは、クラスベースのコンポーネントよりも軽量ではなく、「クラスとまったく同じように機能します」。 - https://github.com/facebook/react/issues/5677

上記のリンクは少し古いですが、React 16.7.0のドキュメントには、機能コンポーネントとクラスコンポーネントが記載されています。

「Reactの観点からは同等です。」 - https://reactjs.org/docs/components-and-props.html#stateless-functions

機能コンポーネントと、renderメソッドを実装するだけのクラスコンポーネントには、構文以外に本質的な違いはありません。

将来（上記のリンクを引用）「このような最適化を追加するかもしれません。」

不要なレンダリングを排除してパフォーマンスを向上させようとしている場合、両方のアプローチがサポートを提供します。機能コンポーネントの場合はmemo、クラスの場合はPureComponent。

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

本当にあなた次第です。定型文を減らしたい場合は、機能的にします。関数型プログラミングが好きで、クラスが好きでないなら、関数型になります。コードベースのすべてのコンポーネント間で一貫性が必要な場合は、クラスを使用します。 stateのようなものが必要なときに、機能ベースのコンポーネントからクラスベースのコンポーネントへのリファクタリングにうんざりしている場合は、クラスを使用してください。

16
Galupuf

React 16.8の時点で、ステートレス機能コンポーネントという用語は誤解を招くため、ステートレスではなくなるため避ける必要があります（ React.SFC deprecated 、 Dan Abramov on React.SFC ）、状態を持つことができ、フック（ライフサイクルメソッドとして機能する）も持つことができ、クラスコンポーネントと多少重複します。

クラスベースのコンポーネント

機能コンポーネント：

機能コンポーネントが好きな理由

  • ReactはuseEffectフックを提供します。これは、componentDidMount、componentDidUpdate、およびcomponentWillUnmountライフサイクルメソッドを組み合わせる非常に明確で簡潔な方法です。
  • フックを使用すると、コンポーネント間で簡単にsharedおよびtestable
  • スコーピングに関する混乱が少ない

React 動機 フック（つまり、機能コンポーネント）を使用する理由

1
Karim