Reactライフサイクルを視覚化したサンプル
const r = (t) => {
const result = document.getElementById('result');
return result.innerHTML = '<li>' + t + '</li>' + result.innerHTML;
};
const j = (t) => JSON.stringify(t);
const Counter = React.createClass({
getDefaultProps: function() {
// デフォルトのpropsを指定
// propsはReactDOM.renderで指定したほうが良いため
// なるべく使用しないほうが良い
r('getDefaultProps');
// return {name: 'foo'};
},
getInitialState: function() {
// 初期値などを指定
// 一番最初に実行されると説明しているサイトがあるが
// getDefaultPropsがあると、そちらが先なので間違え
// npm使用時はgetInitialStateではなくconstructor()
r('getInitialState');
return {len: 0}
},
componentWillMount: function() {
// マウントされる直前
// componentWillMount後にrenderが実行される
r('componentWillMount');
},
componentDidMount: function() {
// マウントされた直後
r('componentDidMount');
},
componentWillUnmount: function() {
// アンマウントされる直前
r('componentWillUnmount');
},
componentWillReceiveProps: function(newProps) {
// プロパティを受け取る直前
r('componentWillReceiveProps' + j(newProps));
},
shouldComponentUpdate: function(nextProps, nextState) {
// プロパティまたはステートを受け取る直前
r('shouldComponentUpdate' + j(nextProps) + j(nextState));
if (this.state.val === nextState.val) {
return false;
} else {
return true;
}
},
componentWillUpdate: function(nextProps, nextState) {
// コンポーネントが更新される直前
r('componentWillUpdate' + j(nextProps) + j(nextState));
},
componentDidUpdate: function(prevProps, prevState) {
// コンポーネントが更新された直後
r('componentDidUpdate' + j(prevProps) + j(prevState));
},
componentDidCatch: function(error, info) {
// エラー発生時に実行
r('componentDidCatch');
},
render: function() {
r('render');
return (
<div>
<input type="text" title={this.props.name} onChange={this.handleChange} />
<button onClick={this.handleClick}>reset</button>
</div>
);
},
handleChange: function(e) {
this.setState({
val: e.target.value,
len: e.target.value.length
});
},
handleClick: function() {
this.setState({
val: undefined,
len: undefined
});
}
});
ReactDOM.render(
<Counter name='foo' />,
document.getElementById('app')
);
const unmount = document.getElementById('unmount');
unmount.addEventListener('click', () => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
});
const renderNameBar = document.getElementById('renderNameBar');
renderNameBar.addEventListener('click', () => {
ReactDOM.render(
<Counter name='bar' />,
document.getElementById('app')
);
});