Reactでの関数宣言コンポーネント

本文はReact入門とベストプラクティスに属するReactコンポーネントの基礎から
前述したコンポーネントの定義は、主に宣言コンポーネントであり、従来のjQueryでDOM操作を核心とするコマンドコンポーネント生成に比べて柔軟性と組合せ性が向上します.実際には、適用の複雑さと必要なコンポーネントの数が増加し続けるにつれて、私たちが必要とするコンポーネントも多くのタイプに分けられます.コンポーネントの組み合わせの観点またはいわゆるダイナミックコンポーネントの観点から、あるコンポーネントを別のコンポーネントのPropsまたはサブコンポーネントとしてカプセル化して高次コンポーネントをカプセル化するHOCモードが一般的である.もう1つの偏向関数式のモードは、Arrow Functionのように、無状態の単純なコンポーネントに対して、関数式コンポーネントを使用して宣言することで、コードの可読性が向上し、冗長コードの数が減少する関数式コンポーネントを構築することです.React自体のインタフェースに対する抽象はView = f(props)、すなわち純粋なインタフェースのレンダリング関数を純粋な関数と近似することができる.関数コンポーネントは、Class宣言に基づくコンポーネントと比較して、次の特性を有します.

クラスを宣言する必要はなく、例えばextendsやconstructorのようなコード

を大量に回避することができる.

宣言thisキーワードを表示する必要はありません.ES 6のクラス宣言では、関数のthisキーワードを現在の役割ドメインにバインドする必要があります.関数宣言の特性のため、バインドを強制する必要はありません.

onClick={this.sayHi.bind(this)}>Say Hi
onClick={sayHi}>Say Hi

ベストプラクティスを貫き、Reactコンポーネントの多重化と組合せでは、下位レベルの展示コンポーネントにステータスの管理が混入することを回避し、ある高次コンポーネントまたは他のステータスコンテナにステータスを管理する必要があると述べます.関数宣言コンポーネントを使用すると、コンポーネント内でステータス操作が行われないことを完全に保証できます.

分かりやすくテスト

より優れたパフォーマンス:関数コンポーネントではライフサイクルの管理とステータス管理が必要ないため、Reactは特定のチェックやメモリ割り当てを必要とせず、パフォーマンスの向上を保証します.

最後に、次の図を比較すると、関数コンポーネント宣言方法の簡潔さがわかります.
Usage:使用する
ここでは簡単なTextコンポーネントを定義します.

class Text extends React.Component {

  render() {

    return 
{this.props.children}
;

  }

}

React.render(Hello World, document.body);

上記で定義したTextコンポーネントは、典型的なPure Components、あるいはDummy Componentsと見なすことができ、すなわち、関数式プログラミングにおける純粋な関数のように、出力は入力されたPropsによって完全に決定され、副作用は生じない.このタイプのコンポーネントは、我々のアプリケーションで大きなシェアを占めますが、React 0.14の後に、以下に示すように、関数の定義と同様に、このような無状態コンポーネントを定義することもできます.

const Text = (props) =>
  
{props.children}
;
// ReactDOM is part of the introduction of React 0.14
ReactDOM.render(
  Hello World, 
  document.querySelector('#root')
);

このパターンは主に,大規模なプロジェクトにおいて,本来膨大なコンポーネントをできるだけ簡単な書き方で分割することを奨励し,将来的には,このような無状態のコンポーネントに対して,例えば無意味なチェックやメモリ割り当てを避ける分野で専門的な最適化を行う.このような無状態関数コンポーネントの書き方も、デフォルトのPropsタイプと値の設定をサポートしています.

const Text = ({ children }) => 
  
{children}
Text.propTypes = { children: React.PropTypes.string };
Text.defaultProps = { children: 'Hello World!' };

ES 6のデフォルト関数パラメータを使用して、デフォルト値を設定することもできます.

const Text = ({ children = 'Hello World!' }) =>
  
{children}

また、無状態のコンポーネント関数でもContextにアクセスできます.

const Text = (props, context) =>
  
props.children
;
Text.contextTypes = {
  fontFamily: React.PropTypes.string
};
class App extends React.Component {
  static childContextTypes = {
    fontFamily: React.PropTypes.string
  }
  getChildContext() {
    return {
      fontFamily: 'Helvetica Neue'
    };
  }
  render() {
    return Hello World;
  }
}