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 件のコメント:
コメントを投稿