JSX
FaceBookが開発したjavascript拡張機能。HTMLタグをjavascriptの中に書ける。実際はBabelを使ってHTMLの部分をjavascriptのプログラムに置き換えている
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"></div> <script src="app.js"></script> </body> </html>
// jsxを使用できるようにreactのモジュールをimport import React from "react"; import ReactDOM from "react-dom"; // 描画関数のReactDom.renderにh1タグを渡して'app'に描画する const app = document.getElementById('app'); ReactDOM.render(<h1> Hello </h1>, app);
注意点
- コンポーネント名は大文字から始める
- class属性は「className」と書く
- returnで戻すタグは一つ。複数返したい場合はdivとかでくくる
- 閉じタグがない場合はエラー
- 属性値は""でくくる。テンプレート文字列(``)は指定できない
- {}でくくるとjavascriptが使用できる
import React from "react"; import ReactDOM from "react-dom"; // 関数コンポーネント。大文字から始める const App = () =>{ // class属性はclassName // 属性値は””でくくる // 戻すタグはdivなどで一つにまとめる return ( <div> <h1 className="greeting"> Hello </h1> </div> ) } const app = document.getElementById('app'); ReactDOM.render(<App/>, app);
コンポーネント
独立した再利用可能な部品として分けられたもの
関数コンポーネント
// JSXの項で描いたやつ const App = () =>{ return ( <div> <h1 className="greeting"> Hello </h1> </div> ) }
クラスコンポーネント
// importしたReactモジュールのComponentを継承する // renderメソッドに描画したい内容を定義する class App extends React.Component { render(){ return( <div> <h1 className="greeting"> Hello </h1> </div> ) } }
renderメソッドについて
renderは以下のタイミングでReactが自動的に呼び出す
- javascriptがブラウザにロードされた直後
- コンポーネントのpropsが変更された時
- コンポーネント内でsetState()メソッドを実行してstateが変更された時
※setState()を複数回呼んだからといって毎回render呼び出しされるわけではないみたい
setStateを複数回実行してもrenderは1回しか呼ばれない
【翻訳記事】関数型setStateはReactの未来だ
State
コンポーネントが保持する状態、値のこと
注意点
- stateはthis.stateというインスタンス変数に格納される
- stateの更新は必ずthis.setState()メソッドを使用する
- this.setState()はrender()メソッドで呼び出してはいけない。this.setState()によってrender()が呼び出され再帰呼び出しエラーとなってしまうため
class Human extends React.Component { constructor() { super(); // stateの初期処理 this.state = { name: '' } } setName(){ const name = this.getName() this.setState({ name: name }); } ... render(){ return( <div> <h1>{this.state.name}</h1> </div> ) } }
Props
コンポーネントに渡されるパラメータのこと
class Human extends React.Component { ... render(){ return( // Greetingコンポーネントのnameにパラメータを渡す <Greeting name={this.state.name}> ) } } const Greeting = (props) => { const greeting = this.currentTimeGreeting() return ( <div> <h1>私は{props.name}です{greeting}!</h1> </div> ) }
参考
公式ドキュメント
setStateを複数回実行してもrenderは1回しか呼ばれない
【翻訳記事】関数型setStateはReactの未来だ
0 件のコメント:
コメントを投稿