最終更新:2022-12-16 (金) 05:03:07 (556d)  

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/フックの導入
    • 関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数

開発

React/コンポーネント

React/ステート

React/コンテクスト

React/Ref

  • refはReact/関数コンポーネントに対しては指定できない
  • 関数コンポーネントに対してrefを使いたい場合、forwardRefを使うかクラスに書き換える
  • DOM要素またはクラスコンポーネントを参照している限り、関数コンポーネント内で ref 属性を使用することは可能

React/メモ化

参考