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="//cdn.bootcss.com/react/15.2.1/react-with-addons.min.js"></script>
  <script src="//cdn.bootcss.com/react/15.2.1/react-dom.min.js"></script>
<meta name="description" content="React & Immutable js">
  <script src="http//cdn.bootcss.com/immutable/3.8.1/immutable.min.js"></script>
​
  <meta charset="utf-8">
  <title>React and Immutable js</title>
</head>
<body>
  </body>
</html>
 
​
 
​
var shallowCompare = React.addons.shallowCompare
var times = 0
var initState = Immutable.fromJS({
  a: {
    b: {
      c: 1
    }
  }
})
var Component = React.createClass({
    
    getInitialState() {
        return {
          data: initState
        }
    },
    shouldComponentUpdate(nextProps, nextState) {
      return shallowCompare(this, nextProps, nextState);
    },
    handleSameClick() {
      this.setState({ data: initState })
    },
​
    handleDiffClick() {
      
      var state = this.state.data.updateIn(['a', 'b', 'c'], function(value) { 
        return value + 1 
      })
      this.setState({
        data: state
      })
    },
    render() {
        times++
        return (
            <div>
                <h2>
                    Render Times: {times}
                </h2>
                <h3>
                C is {this.state.data.getIn(['a' ,'b', 'c'])}
                </h3>
                <button onClick={this.handleSameClick}>same value</button>
                <button onClick={this.handleDiffClick}>diff value</button>
            </div>
        );
    }
​
});
​
ReactDOM.render(<Component />, document.body);
​
Output

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

Dismiss x
public
Bin info
dYbpro
0viewers