var Temp = React.createClass({
getDefaultProps: function() {
// コンポーネント1つにつき一度だけ呼ばれる
console.log("getDefaultProps");
},
getInitialState: function() {
// インスタンス作成のたびに呼ばれる
console.log("getInitialState");
return {temp: "EMPTY"};
},
componentWillMount: function() {
// 描画が行われる直前に呼ばれる
console.log("componentWillMount");
},
render: function() {
// このメソッドにより仮想DOMが作成される
console.log("render");
return(
<p className="temp">{this.props.temp}</p>
);
},
componentDidMount: function() {
// 描画が成功して、DOMにアクセス可能になる
console.log("componentDidMount");
},
componentWillReceiveProps: function() {
// プロパティ(props)が変更された時
console.log("componentWillReceiveProps");
},
shouldComponentUpdate: function() {
// propsが変更されてもコンポーネントに変更がない時はここでfalseを返すことで、あとの処理を飛ばすことができる
console.log("shouldComponentUpdate");
return true;
},
componentWillUpdate: function() {
// 描画が行われる直前に呼ばれる
console.log("componentWillUpdate");
},
componentDidUpdate: function() {
// 描画が成功して、DOMにアクセス可能になる
console.log("componentDidUpdate");
},
componentDidUnmount: function() {
// コンポーネントが破棄される時に呼び出される
console.log("componentDidUnmount");
}
});
React.render(
<Temp temp="メソッドの練習" />,
document.getElementById('content')
);
More than 5 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme