Merge pull request #285 from matrix-org/rav/no_rerender_in_umount

Avoid rerendering during Room unmount
This commit is contained in:
Richard van der Hoff 2016-04-22 17:29:51 +01:00
commit cdd08bbb6f
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
// to manage its animations
this._readReceiptMap = {};
this._isMounted = true;
},
componentWillUnmount: function() {
this._isMounted = false;
},
/* get the DOM node representing the given event */
@ -201,6 +207,10 @@ module.exports = React.createClass({
}
},
_isUnmounting: function() {
return !this._isMounted;
},
_getEventTiles: function() {
var EventTile = sdk.getComponent('rooms.EventTile');
@ -351,6 +361,7 @@ module.exports = React.createClass({
onWidgetLoad={this._onWidgetLoad}
readReceipts={readReceipts}
readReceiptMap={this._readReceiptMap}
checkUnmounting={this._isUnmounting}
eventSendStatus={mxEv.status}
last={last} isSelectedEvent={highlight}/>
</li>

View File

@ -116,6 +116,12 @@ module.exports = React.createClass({
*/
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
* that we can tell when it changes. */
eventSendStatus: React.PropTypes.string,
@ -261,6 +267,7 @@ module.exports = React.createClass({
<ReadReceiptMarker key={userId} member={member}
leftOffset={left} hidden={hidden}
readReceiptInfo={readReceiptInfo}
checkUnmounting={this.props.checkUnmounting}
suppressAnimation={this._suppressReadReceiptAnimation}
onClick={this.toggleAllReadAvatars}
/>

View File

@ -53,6 +53,11 @@ module.exports = React.createClass({
// this room
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
onClick: React.PropTypes.func,
},
@ -81,6 +86,13 @@ module.exports = React.createClass({
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);
rrInfo.top = avatarNode.offsetTop;
rrInfo.left = avatarNode.offsetLeft;