【React】関数コンポーネントとクラスコンポーネントの違いについて

コンポーネント

• 見た目と機能を持つUI部品
• 「関数コンポーネント」「クラスコンポーネント」の二つが代表される

クラスコンポーネント

① React.Component を拡張して作られるJavaScriptクラスである。

import React, { Component } from "react";     //拡張する Component をインポート

class ClassComponent extends Component {  // extends で拡張したクラスを生成
 render() {                          // レンダリングする要素は render() メソッド内で返される
    return <button>push here</button>;
 }
}

② propsの受け渡しは this.props を使う (プロパティー)

class ClassComponent extends React.Component {
  render() {
    const { who } = this.props;
 return <button>push { who }</button>;
  }
} 

③ state処理はconstructor内に記述する

class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }

関数コンポーネント

① React.Component を拡張して作られるJavaScriptクラス。

import React from "react";
 
const FunctionalComponent = () => {
 return <button>push here</button>;
};

② props の受け渡しは引数にて行う。

const FunctionalComponent = ({ who }) => {
 return <button>push { who }</button>;
};

// <FunctionalComponent who="me" />

③ state処理はuseState()を使う。

const FunctionalComponent = () => {
 const [count, setCount] = useState(0);

 return (
   <div>
     <button onClick={() => setCount(count + 1)}>{count} time(s) pushed </button>
   </div>
 );
};