次の反応コードの違いは何ですか？

Question

私は次のマテリアルサンプルコードに出会った。

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 

/** 
* A simple example of `AppBar` with an icon on the right. 
* By default, the left icon is a navigation-menu. 
*/ 
const AppBarExampleIcon =() => (
    <AppBar 
    title="Title" 
    iconClassNameRight="muidocs-icon-navigation-expand-more" 
    /> 
); 

export default AppBarExampleIcon; 

私のチュートリアルでは、React.Componentからサブクラス化してコンポーネントを作成する必要があります。サンプルの例があります

import React from 'react'; 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      Hello World!!! 
     </div> 
    ); 
    } 
} 

export default App; 

誰も私に違いがあると教えてもらえますか？

Answer 1

最初のものは機能コンポーネント（「ステートレスコンポーネント」または「ステートレス機能コンポーネント」とも呼ばれます）です。可能な限り、最初のものを使用することをお勧めします。ただし、状態が必要な場合やライフサイクルメソッドを使用する場合は、React.Componentを使用する必要があります。