Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.13.1.js"></script>
  <meta charset="utf-8">
  <title>React shouldComponentUpdate JSBin</title>
</head>
<body>
  <div id="react_example"></div>
</body>
</html>
 
class ParentComponent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state ={
      count : 0
    }
  }
  componentDidMount() {
    window.setInterval(()=>{
      this.setState({count:this.state.count+1});
    }, 1);
    
  }
  render() {
    return (      
      <ChildComponent count={this.state.count}></ChildComponent>
    );
  }
}
class ChildComponent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state ={
      timer : false
    }
    window.setInterval(()=>{
      this.state.timer = !this.state.timer
    }, 1000);
  }
  componentWillReceiveProps( nextProps ) {
    console.log(nextProps.count)
  }
  shouldComponentUpdate( nextProps,  nextState ){
    if (this.state.timer){
      this.state.timer = ! this.state.timer;
      return true;
    }
    return false;
  }
  render() {
    return (      
      <h1>count {this.props.count}</h1>      
    );
  }
}
React.render(
  <ParentComponent/>,
  document.getElementById('react_example')
);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kvzhuangpro
0viewers