reactjs - React.js + Immutable.js: best practices for shouldComponentUpdate with filtered lists -
what best practices filtering immutable.list
passing down child components regards shouldcomponentupdate
?
illustrative example: i'm building calendar. has <week>
component, holding 7 <day>
components. <week>
receives list of calendar events, renders <day>
s , passes filtered subset of events each of them props.
all <day>
components have purerendermixin
attached them, intent of preventing useless re-renders. but, given immutable.list.filter
returns new object each time, when single event added, every <day>
component receive 'new' event list prop , re-render, when 1 of them have same content.
my current idea writing custom shouldcomponentupdate
compares hashcode
s of every list component decides re-render based on that. there better, more established way it?
code example requested. assume <week>
wired flux store , gets events it.
day = react.createclass({ proptypes: { events: react.proptypes.instanceof(immutable.list) }, mixins: [ react.addons.purerendermixin ], render: function(){ const events = this.props.events.map((event) => { return <div key={event.get('id')}>{event.get('name')}</div> }) return <div>{events}</div> } }) week = react.createclass({ proptypes: { events: react.proptypes.instanceof(immutable.list) }, mixins: [ react.addons.purerendermixin ], render: function(){ const days = [1,2,3,4,5,6,0].map((weekday) => { const dayevents = this.props.events.filter(event => event.get('weekday') === weekday) return <day events={dayevents} key={weekday} /> }) return <div>{days}</div> } })
you should restructure model this-
{'monday':{...events...}, 'tuesday':{...events...}, ...}
this way can pass right set of events right child day component.
update noticed using numbers weekdays, substitute day names numbers, or use list/array store events. doing away need of calling filter
.
Comments
Post a Comment