React performance rendering big list with PureRenderMixin. Here is a POC implementation I’ve done with ImmutableJS internal structure. This is not a public API so it is not ready for production and does not currently handle corner cases but it works.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | var ImmutableListRenderer = React.createClass({ render: function() { // Should not require to use wrapper <span> here but impossible for now return (<span> {this.props.list._root ? <GnRenderer gn={this.props.list._root}/> : undefined} {this.props.list._tail ? <GnRenderer gn={this.props.list._tail}/> : undefined} </span>); } }) // "Gn" is the equivalent of the "internal node" of the persistent data structure schema of the question var GnRenderer = React.createClass({ shouldComponentUpdate: function(nextProps) { console.debug("should update?",(nextProps.gn !== this.props.gn)); return (nextProps.gn !== this.props.gn); }, propTypes: { gn: React.PropTypes.object.isRequired, }, render: function() { // Should not require to use wrapper <span> here but impossible for now return ( <span> {this.props.gn.array.map(function(gnItem,index) { // TODO should check for Gn instead, because list items can be objects too... var isGn = typeof gnItem === "object" if ( isGn ) { return <GnRenderer gn={gnItem}/> } else { // TODO should be able to customize the item rendering from outside return <span>{" -> " + gnItem}</span> } }.bind(this))} </span> ); } }) |
The client code looks like
1 2 3 4 | React.render( <ImmutableListRenderer list={ImmutableList}/>, document.getElementById('container') ); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
