• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React/コンポーネント

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/ステート

• useState

React/コンテクスト

• useContext

React/Ref

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

React/メモ化

• useMemo
• useCallback

参考

• https://qiita.com/uhyo/items/246fb1f30acfeb7699da