最終更新:2022-08-04 (木) 18:34:31 (11d)  

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

https://ja.reactjs.org/docs/components-and-props.html

概要

  • props”と呼ばれる任意の入力を受け取り、画面上に表示すべきものを記述するReact要素を返す

ルール

  • 全てのReactコンポーネントは、自己のReact/propsに対して純粋関数のように振る舞わねばなりません。
    • 純粋関数(Pure function):同じ入力に対し同じ結果を返す

作り方

React/関数コンポーネント

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

React/クラスコンポーネント

React.createClass

制御

React/制御されたコンポーネント

  • React によって値が制御される入力フォーム要素

React/非制御コンポーネント

コンポーネント名

  • Reactは小文字で始まるコンポーネントをDOMタグ(HTMLタグ)として扱います
  • 典型的には、新規の React アプリは階層の一番上に単一の App コンポーネントを持っています。

ライフサイクル

  • constructor
  • componentDidMount?
  • componentDidUpdate?
  • componentWillUnmount?

メソッド

  • getDerivedStateFromProps?: 親コンポーネントから渡された props を計算して自身の state を導き出すためのメソッド
  • shouldComponentUpdate?

関連