2016年05月24日

ReactのshouldComponentUpdateサンプル

ReactのライフサイクルないのshouldComponentUpdate()でfalseを返すとrenderメソッドが走らない。
サンプルでコンポーネントInner1は偶数の場合のみ実行される。

<div id="sample"></div>
<script type="text/babel">
class Inner1 extends React.Component {
shouldComponentUpdate(nextProps,nextState){
return nextProps.num%2===1
}
render(){
return (
<span>{this.props.num}</span>
)
}
}
class Inner2 extends React.Component {
render(){
return (
<span>{this.props.num}</span>
)
}
}
class Wrap extends React.Component {
constructor(props) {
super(props);
this.state = { num:0 };
}
handleClick(e){
this.setState({
num: this.state.num + 1
});
}
render(){
return (
<div>
<div><Inner1 num={this.state.num} /></div>
<div><Inner2 num={this.state.num} /></div>
<button onClick={this.handleClick.bind(this)}>click</button>
</div>
)
}
}
React.render(
<Wrap/>,
document.getElementById('sample')
);
</script>


shouldComponentUpdate()では引数で受け取ったpropsとstateを元にレンダリングするかどうかを判定できます。
posted by ねこまんま at 00:09 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック