最終更新:2023-07-19 (水) 13:28:24 (477d)
React/コンポーネント
https://ja.reactjs.org/docs/components-and-props.html
概要
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 アプリは階層の一番上に単一の App コンポーネントを持っています。
ライフサイクル
メソッド
return
- 表示しない場合はレンダー出力(render())の代わりにnullを返す