[react]クラスvs関数


クラス#クラス#

import React, { Component } from 'react';

class App extends Component {
  render() { 
    const hello = 'Hello world!';
    return <div>{hello}</div>;
  }
}

export default App;
  • ステータス機能とライフサイクル機能を使用できます.
  • ランダムメソッドを定義できます.
  • render関数に表示されるJSX実装
  • かんすうがた

    
    import React from 'react';
    
    function App() {
      const hello = 'Hello world';
      return <div>{hello}</div>;
    }
    
    export default App;
  • クラスの構成部品よりも宣言しやすく、メモリリソースが少ない
  • 反応フックの導入に伴い、過去には不可能な状態およびライフサイクルAPIを使用することができる.
  • ☝🏻 Reactive Hookの導入により,クラスでしか実現できない状態機能とライフサイクル機能が関数にも現れるため,宣言の利便性(コード統一性)とメモリリソースが少ない理由で関数型素子を推奨する.