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

React

React/コンポーネント

Top / React / コンポーネント

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

概要

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

React/props

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

ルール

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

作り方

• 現代 (2018～)	React 16.8からReact/フックが使える	React/関数コンポーネント
  2016～	React 15～	React/クラスコンポーネント
  ～2016	～React 15.5	React.createClass

React/関数コンポーネント

• render メソッドだけを有して自分の state を持たないコンポーネントを、よりシンプルに書くための方法
• React.Componentを継承するクラスを定義する代わりに、props を入力として受け取り表示すべき内容を返す関数を定義

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }

• propsを引数として受け取り、React要素を返す

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

• React 15 (2016/04)からはES6のクラスを用いてReact/クラスコンポーネントを作成することが主流に
• React.Componentを継承

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

React.createClass

• React 15.5で非推奨
  • React 15 (2016/04)からはReact/クラスコンポーネントを作成することが主流に
• getInitialState

制御

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

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

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

コンポーネント名

• Reactは小文字で始まるコンポーネントをDOMタグ(HTMLタグ)として扱います

• 典型的には、新規の React アプリは階層の一番上に単一の App コンポーネントを持っています。

ライフサイクル

• constructor
• componentDidMount?
• componentDidUpdate?
• componentWillUnmount?

メソッド

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

return

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

関連

• React/JSX
• React.createElement
• React.createClass