Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-02-23 23:54:13 +08:00
Code Issues Projects Releases Packages Wiki Activity

perf(thread-list): Avoid recomputing column contents when item prop has not changed

Browse source
This commit is contained in:
Ben Gotow 2015-09-30 13:57:58 -07:00
parent 801c7a4c35
commit 029270bcae
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/list-tabular.cjsx
View file

@ -21,16 +21,23 @@ class ListTabularItem extends React.Component
# React.Perf.wasted-time from ~300msec to 20msec by doing a deep # React.Perf.wasted-time from ~300msec to 20msec by doing a deep
# comparison of props before triggering a re-render. # comparison of props before triggering a re-render.
shouldComponentUpdate: (nextProps, nextState) => shouldComponentUpdate: (nextProps, nextState) =>
# Quick check to avoid running isEqual if our item === existing item if not Utils.isEqualReact(@props.item, nextProps.item)
return false if _.isEqual(@props, nextProps) @_columnCache = null
true return true
if not Utils.isEqualReact(_.omit(@props, 'item'), _.omit(nextProps, 'item'))
return true
false
render: => render: =>
className = "list-item list-tabular-item #{@props.itemProps?.className}" className = "list-item list-tabular-item #{@props.itemProps?.className}"
props = _.omit(@props.itemProps ? {}, 'className') props = _.omit(@props.itemProps ? {}, 'className')
# It's expensive to compute the contents of columns (format timestamps, etc.)
# We only do it if the item prop has changed.
@_columnCache ?= @_columns()
<div {...props} className={className} onClick={@_onClick} style={position:'absolute', top: @props.metrics.top, width:'100%', height:@props.metrics.height, overflow: 'hidden'}> <div {...props} className={className} onClick={@_onClick} style={position:'absolute', top: @props.metrics.top, width:'100%', height:@props.metrics.height, overflow: 'hidden'}>
{@_columns()} {@_columnCache}
</div> </div>
_columns: => _columns: =>
@ -105,8 +112,8 @@ class ListTabular extends React.Component
# Expand the start/end so that you can advance the keyboard cursor fast and # Expand the start/end so that you can advance the keyboard cursor fast and
# we have items to move to and then scroll to. # we have items to move to and then scroll to.
rangeStart = Math.max(0, rangeStart - 5) rangeStart = Math.max(0, rangeStart - 2)
rangeEnd = Math.min(rangeEnd + 5, @props.dataView.count()) rangeEnd = Math.min(rangeEnd + 2, @props.dataView.count())
# Final sanity check to prevent needless work # Final sanity check to prevent needless work
return if rangeStart is @state.renderedRangeStart and return if rangeStart is @state.renderedRangeStart and

2
src/flux/stores/database-store.coffee
View file

@ -506,7 +506,7 @@ class DatabaseStore extends NylasStore
set = (change) => set = (change) =>
clearTimeout(@_changeFireTimer) if @_changeFireTimer clearTimeout(@_changeFireTimer) if @_changeFireTimer
@_changeAccumulated = change @_changeAccumulated = change
@_changeFireTimer = setTimeout(flush, 20) @_changeFireTimer = setTimeout(flush, 10)
concat = (change) => concat = (change) =>
@_changeAccumulated.objects.push(change.objects...) @_changeAccumulated.objects.push(change.objects...)