最終更新:2023-07-19 (水) 13:28:24 (477d)  

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

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

概要

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

React/props

  • コンポーネントに渡されるオブジェクト
    • JSXに書かれている属性と子要素が単一のオブジェクトとして渡される

ルール

  • 全ての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?

return

  • 表示しない場合はレンダー出力(render())の代わりにnullを返す

関連