Avoid rerendering during Room unmount

might speed up room changing by a few milliseconds
This commit is contained in:
Richard van der Hoff 2016-04-22 17:03:15 +01:00
parent 0fd0b0c5f3
commit ca0c697b6e
3 changed files with 30 additions and 0 deletions

View file

@ -85,6 +85,12 @@ module.exports = React.createClass({
// opaque readreceipt info for each userId; used by ReadReceiptMarker // opaque readreceipt info for each userId; used by ReadReceiptMarker
// to manage its animations // to manage its animations
this._readReceiptMap = {}; this._readReceiptMap = {};
this._isMounted = true;
},
componentWillUnmount: function() {
this._isMounted = false;
}, },
/* get the DOM node representing the given event */ /* get the DOM node representing the given event */
@ -201,6 +207,10 @@ module.exports = React.createClass({
} }
}, },
_isUnmounting: function() {
return !this._isMounted;
},
_getEventTiles: function() { _getEventTiles: function() {
var EventTile = sdk.getComponent('rooms.EventTile'); var EventTile = sdk.getComponent('rooms.EventTile');
@ -351,6 +361,7 @@ module.exports = React.createClass({
onWidgetLoad={this._onWidgetLoad} onWidgetLoad={this._onWidgetLoad}
readReceipts={readReceipts} readReceipts={readReceipts}
readReceiptMap={this._readReceiptMap} readReceiptMap={this._readReceiptMap}
checkUnmounting={this._isUnmounting}
eventSendStatus={mxEv.status} eventSendStatus={mxEv.status}
last={last} isSelectedEvent={highlight}/> last={last} isSelectedEvent={highlight}/>
</li> </li>

View file

@ -116,6 +116,12 @@ module.exports = React.createClass({
*/ */
readReceiptMap: React.PropTypes.object, readReceiptMap: React.PropTypes.object,
/* A function which is used to check if the parent panel is being
* unmounted, to avoid unnecessary work. Should return true if we
* are being unmounted.
*/
checkUnmounting: React.PropTypes.func,
/* the status of this event - ie, mxEvent.status. Denormalised to here so /* the status of this event - ie, mxEvent.status. Denormalised to here so
* that we can tell when it changes. */ * that we can tell when it changes. */
eventSendStatus: React.PropTypes.string, eventSendStatus: React.PropTypes.string,
@ -261,6 +267,7 @@ module.exports = React.createClass({
<ReadReceiptMarker key={userId} member={member} <ReadReceiptMarker key={userId} member={member}
leftOffset={left} hidden={hidden} leftOffset={left} hidden={hidden}
readReceiptInfo={readReceiptInfo} readReceiptInfo={readReceiptInfo}
checkUnmounting={this.props.checkUnmounting}
suppressAnimation={this._suppressReadReceiptAnimation} suppressAnimation={this._suppressReadReceiptAnimation}
onClick={this.toggleAllReadAvatars} onClick={this.toggleAllReadAvatars}
/> />

View file

@ -53,6 +53,11 @@ module.exports = React.createClass({
// this room // this room
readReceiptInfo: React.PropTypes.object, readReceiptInfo: React.PropTypes.object,
// A function which is used to check if the parent panel is being
// unmounted, to avoid unnecessary work. Should return true if we
// are being unmounted.
checkUnmounting: React.PropTypes.func,
// callback for clicks on this RR // callback for clicks on this RR
onClick: React.PropTypes.func, onClick: React.PropTypes.func,
}, },
@ -81,6 +86,13 @@ module.exports = React.createClass({
return; return;
} }
// checking the DOM properties can force a re-layout, which can be
// quite expensive; so if the parent messagepanel is being unmounted,
// then don't bother with this.
if (this.props.checkUnmounting && this.props.checkUnmounting()) {
return;
}
var avatarNode = ReactDOM.findDOMNode(this); var avatarNode = ReactDOM.findDOMNode(this);
rrInfo.top = avatarNode.offsetTop; rrInfo.top = avatarNode.offsetTop;
rrInfo.left = avatarNode.offsetLeft; rrInfo.left = avatarNode.offsetLeft;