最終更新:2022-08-04 (木) 11:23:54 (4d)  

React/関数コンポーネント
Top / React / 関数コンポーネント

概要

  • render メソッドだけを有して自分の state を持たないコンポーネントを、よりシンプルに書くための方法
  • React.Componentを継承するクラスを定義する代わりに、props を入力として受け取り表示すべき内容を返す関数を定義
    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
  • propsを引数として受け取り、React要素を返す

  • const Example = (props) => {
      // You can use Hooks here!
      return <div />;
    }
    function Example(props) {
      // You can use Hooks here!
      return <div />;
    }
  • 分割代入で引数を受け取ることもできる
    const Example = ({color, children}) => {
      // You can use Hooks here!
      return <div />;
    }

React/フック

  • もともと関数コンポーネントは、クラスコンポーネントが持つようなstateの機能やcomponentDidMount?を始めとするライフサイクルメソッドを持たなかった
  • React/フックの導入

参考