08a9307352
There are few easy wins that greatly improve our perf with React: * Add the PureRenderMixin to pure components that always render the same thing given the same props and state. This implements React's shouldComponentUpdate as a shallow equality check of the props and state, so render() will be skipped if they match the previous values. * Change action dispatch functions so they are only created once instead of on each render(). If an outer component creates new functions for each render() call, then the PureRenderMixin equality check fails for only the new function instances, even though no data has changed. MozReview-Commit-ID: D96X048nEF4
49 lines
980 B
JavaScript
49 lines
980 B
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
"use strict";
|
|
|
|
const { DOM: dom, createClass, PropTypes, addons } =
|
|
require("devtools/client/shared/vendor/react");
|
|
|
|
const Types = require("../types");
|
|
|
|
module.exports = createClass({
|
|
|
|
displayName: "Browser",
|
|
|
|
mixins: [ addons.PureRenderMixin ],
|
|
|
|
propTypes: {
|
|
location: Types.location.isRequired,
|
|
width: Types.viewport.width.isRequired,
|
|
height: Types.viewport.height.isRequired,
|
|
isResizing: PropTypes.bool.isRequired,
|
|
},
|
|
|
|
render() {
|
|
let {
|
|
location,
|
|
width,
|
|
height,
|
|
isResizing,
|
|
} = this.props;
|
|
|
|
let className = "browser";
|
|
if (isResizing) {
|
|
className += " resizing";
|
|
}
|
|
|
|
return dom.iframe(
|
|
{
|
|
className,
|
|
src: location,
|
|
width,
|
|
height,
|
|
}
|
|
);
|
|
},
|
|
|
|
});
|