React.createClass

今回はReact.createClassをやります。React.createClassはコンポーネントを作成します。コンポーネントは要素として使用できます。

renderのサンプル

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>React Test</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>

<body>
	<div id="hello"></div>
	<script type="text/babel">
		var World = React.createClass({
			render: function() {
				return (
					<h1>Hello World!!</h1>
				);
			}
		});

		ReactDOM.render(
			<World />,
			document.getElementById('hello')
		);
	</script>
</body>

</html>

上記のサンプルプログラムを実行すると以下のようなソースに変換されます(bodyのみ抜き出し)。

				
<body>
	<div id="hello"><h1 data-reactroot="">Hello World!!</h1></div>
</body>

実行イメージ

(

今回のサンプルではWorldコンポーネントを作成し、それをhelloの場所に挿入しています。

render

				
render: function() {
	return (
		<h1>Hello World!!</h1>
	);
}

createClassメソッドに渡すオブジェクトのメソッドです。画面に表示するJSXまたはReact要素を戻り値に指定します。

getInitialState、componentDidMountのサンプル

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>React Test</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>

<body>
	<div id="hello"></div>
	<script type="text/babel">
		var World = React.createClass({
			getInitialState: function() {
				console.log("1.getInitialState");
				return {msg: "Hello"};
			},
		 	render: function() {
				console.log("2.render");
				return (
					<h1>{this.state.msg}</h1>
				);
			},
			componentDidMount: function() {
				var ctrl = this;
				console.log("3.componentDidMount");

				setTimeout(function() {
					ctrl.setState({ msg: "World!!"});
				}, 2000);
			}
		});

		ReactDOM.render(
			<World />,
			document.getElementById('hello') );

	</script>
</body>

</html>

実行イメージ

→

console.logで出力されるログ

				
1.getInitialState
2.render
3.componentDidMount
2.render

Helloを表示した2秒後にWorld!!を表示します。getInitialState→render→componentDidMount→renderの順に処理が行われます。

state

コンポーネント内でデータと共有するオブジェクトです。中身を変更するとコンポーネントのrenderメソッドが再実行され、画面が再描画されます。
getInitialStateメソッドの戻り値で初期値をセットします。

getInitialState

				
getInitialState: function() {
	console.log("1.getInitialState");
	return {msg: "Hello"};
},

最初に呼ばれ、stateの初期値を戻します。

componentDidMount

				
componentDidMount: function() {
	var ctrl = this;
	console.log("3.componentDidMount");

	setTimeout(function() {
		ctrl.setState({ msg: "World!!"});
	}, 2000);
}

コンポーネント描画時に一度だけ呼ばれます。

ページのトップへ戻る