PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #1283 from matrix-org/rav/matrix_chat_optimisations

Browse source 
Make MatrixChat do fewer render cycles during mount
This commit is contained in:
Luke Barnard 2017-08-09 09:32:54 +01:00 committed by GitHub
commit 102b02054b
1 changed files with 23 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/components/structures/MatrixChat.js
View file

@ -131,9 +131,6 @@ module.exports = React.createClass({
// the master view we are showing. // the master view we are showing.
view: VIEWS.LOADING, view: VIEWS.LOADING,
// a thing to call showScreen with once login completes.
screenAfterLogin: this.props.initialScreenAfterLogin,
// What the LoggedInView would be showing if visible // What the LoggedInView would be showing if visible
page_type: null, page_type: null,
@ -147,8 +144,6 @@ module.exports = React.createClass({
collapse_lhs: false, collapse_lhs: false,
collapse_rhs: false, collapse_rhs: false,
ready: false,
width: 10000,
leftOpacity: 1.0, leftOpacity: 1.0,
middleOpacity: 1.0, middleOpacity: 1.0,
rightOpacity: 1.0, rightOpacity: 1.0,
@ -274,6 +269,15 @@ module.exports = React.createClass({
register_hs_url: paramHs, register_hs_url: paramHs,
}); });
} }
// a thing to call showScreen with once login completes. this is kept
// outside this.state because updating it should never trigger a
// rerender.
this._screenAfterLogin = this.props.initialScreenAfterLogin;
this._windowWidth = 10000;
this.handleResize();
window.addEventListener('resize', this.handleResize);
}, },
componentDidMount: function() { componentDidMount: function() {
@ -294,9 +298,6 @@ module.exports = React.createClass({
linkifyMatrix.onGroupClick = this.onGroupClick; linkifyMatrix.onGroupClick = this.onGroupClick;
} }
window.addEventListener('resize', this.handleResize);
this.handleResize();
const teamServerConfig = this.props.config.teamServerConfig || {}; const teamServerConfig = this.props.config.teamServerConfig || {};
Lifecycle.initRtsClient(teamServerConfig.teamServerURL); Lifecycle.initRtsClient(teamServerConfig.teamServerURL);
@ -312,13 +313,12 @@ module.exports = React.createClass({
// if the user has followed a login or register link, don't reanimate // if the user has followed a login or register link, don't reanimate
// the old creds, but rather go straight to the relevant page // the old creds, but rather go straight to the relevant page
const firstScreen = this.state.screenAfterLogin ? const firstScreen = this._screenAfterLogin ?
this.state.screenAfterLogin.screen : null; this._screenAfterLogin.screen : null;
if (firstScreen === 'login' || if (firstScreen === 'login' ||
firstScreen === 'register' || firstScreen === 'register' ||
firstScreen === 'forgot_password') { firstScreen === 'forgot_password') {
this.setState({loading: false});
this._showScreenAfterLogin(); this._showScreenAfterLogin();
return; return;
} }
@ -367,9 +367,9 @@ module.exports = React.createClass({
} }
const newState = { const newState = {
viewUserId: null, viewUserId: null,
}; };
Object.assign(newState, state); Object.assign(newState, state);
this.setState(newState); this.setState(newState);
}, },
onAction: function(payload) { onAction: function(payload) {
@ -992,14 +992,12 @@ module.exports = React.createClass({
_showScreenAfterLogin: function() { _showScreenAfterLogin: function() {
// If screenAfterLogin is set, use that, then null it so that a second login will // If screenAfterLogin is set, use that, then null it so that a second login will
// result in view_home_page, _user_settings or _room_directory // result in view_home_page, _user_settings or _room_directory
if (this.state.screenAfterLogin && this.state.screenAfterLogin.screen) { if (this._screenAfterLogin && this._screenAfterLogin.screen) {
this.showScreen( this.showScreen(
this.state.screenAfterLogin.screen, this._screenAfterLogin.screen,
this.state.screenAfterLogin.params, this._screenAfterLogin.params,
); );
// XXX: is this necessary? `showScreen` should do it for us. this._screenAfterLogin = null;
this.notifyNewScreen(this.state.screenAfterLogin.screen);
this.setState({screenAfterLogin: null});
} else if (localStorage && localStorage.getItem('mx_last_room_id')) { } else if (localStorage && localStorage.getItem('mx_last_room_id')) {
// Before defaulting to directory, show the last viewed room // Before defaulting to directory, show the last viewed room
dis.dispatch({ dis.dispatch({
@ -1276,20 +1274,20 @@ module.exports = React.createClass({
const hideRhsThreshold = 820; const hideRhsThreshold = 820;
const showRhsThreshold = 820; const showRhsThreshold = 820;
if (this.state.width > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) { if (this._windowWidth > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) {
dis.dispatch({ action: 'hide_left_panel' }); dis.dispatch({ action: 'hide_left_panel' });
} }
if (this.state.width <= showLhsThreshold && window.innerWidth > showLhsThreshold) { if (this._windowWidth <= showLhsThreshold && window.innerWidth > showLhsThreshold) {
dis.dispatch({ action: 'show_left_panel' }); dis.dispatch({ action: 'show_left_panel' });
} }
if (this.state.width > hideRhsThreshold && window.innerWidth <= hideRhsThreshold) { if (this._windowWidth > hideRhsThreshold && window.innerWidth <= hideRhsThreshold) {
dis.dispatch({ action: 'hide_right_panel' }); dis.dispatch({ action: 'hide_right_panel' });
} }
if (this.state.width <= showRhsThreshold && window.innerWidth > showRhsThreshold) { if (this._windowWidth <= showRhsThreshold && window.innerWidth > showRhsThreshold) {
dis.dispatch({ action: 'show_right_panel' }); dis.dispatch({ action: 'show_right_panel' });
} }
this.setState({width: window.innerWidth}); this._windowWidth = window.innerWidth;
}, },
onRoomCreated: function(roomId) { onRoomCreated: function(roomId) {