Reactjs：機能コンポーネントとクラスコンポーネントの違いは何ですか

Question

Reacjtsの機能コンポーネントとクラスコンポーネントの違いを誰でも詳細に説明できますか？機能コンポーネントを使うときとクラスコンポーネントを使うとき。

Answer 1

機能ステートレスコンポーネント（重要ではない中間語）は、プロンプトを入力と出力として使用する単なる「ダム」機能です。彼らには、いかなる状態や方法などもありません。ただ、(props) => { return <span>props.foo</span>; }

Classコンポーネントの状態を持つことができ、変数、メソッドなど

Answer 2

ここではそのお手伝いをすることができダン・アブラモフ監督からgreat articleです。

ここにはがあります; dr;

1. あなたがいる場合class CreatePostForm extends Component {}またはReact.createClass()を使用する必要があります：私はこれを理解方法の

   • あなたcomponent's lifecycle methods（すなわち：componentWillMountまたはcomponentDidMount）にアクセスする必要があり。
   • コンポーネント（一部の人々はまた、コンポーネント、スマートコンポーネントまたはコンテナのこの種を呼び出す）お店へ直接アクセスを持っているので、状態を保持しています。

2. は「ステートレスなコンポーネントを」（一部の人々は、これらのコンポーネントダムのコンポーネントやプレゼンテーションコンポーネントを呼び出す）コンポーネントだけの小道具を受け取り、ページにそれらをレンダリングするとき、あなたがして、それを表現するために、純粋な機能を使用することができますし、それが今、この

   import React from 'react'; export default() => <p>Hello from React!</p>;

のような単純なことができ、それは純粋な関数がこれより方法より複雑に得ることができることを覚えておくことは重要だとあなたは、いくつかのESNext構文と非構造および拡散に慣れている場合属性、あなた

import React from 'react'; 
import AnotherComponent from './AnotherComponent'; 

export default ({ children, ...rest }) => 
    <AnotherComponent extraProp="anExtraProp" { ...rest }> 
     { children } 
    </AnotherComponent>; 

これは役立ちます。