mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
CommitSyncScript
4a0456fb8e
@providesModule should match the file name. In this case we'll be consistent and suffix mixins with Mixin.
79 lines
2.4 KiB
JavaScript
79 lines
2.4 KiB
JavaScript
/**
|
|
* Copyright 2013 Facebook, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
* @providesModule ReactComponentWithPureRenderMixin
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
/**
|
|
* If your React component's render function is "pure", e.g. it will render the
|
|
* same result given the same props and state, provide this Mixin for a
|
|
* considerable performance boost.
|
|
*
|
|
* Most React components have pure render functions.
|
|
*
|
|
* Example:
|
|
*
|
|
* var ReactComponentWithPureRender =
|
|
* require('ReactComponentWithPureRenderMixin');
|
|
* React.createClass({
|
|
* mixins: [ReactComponentWithPureRenderMixin],
|
|
*
|
|
* render: function() {
|
|
* return <div className={this.props.className}>foo</div>;
|
|
* }
|
|
* });
|
|
*
|
|
* Note: This only checks shallow equality for props and state. If these contain
|
|
* complex data structures this mixin may have false-negatives for deeper
|
|
* differences. Only mixin to components which have simple props and state, or
|
|
* use `forceUpdate()` when you know deep data structures have changed.
|
|
*/
|
|
var ReactComponentWithPureRenderMixin = {
|
|
shouldComponentUpdate: function(nextProps, nextState) {
|
|
return !shallowEqual(this.props, nextProps) ||
|
|
!shallowEqual(this.state, nextState);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Performs equality by iterating through keys on an object and returning
|
|
* false when any key has values which are not strictly equal between
|
|
* objA and objB. Returns true when the values of all keys are strictly equal.
|
|
*/
|
|
function shallowEqual(objA, objB) {
|
|
if (objA === objB) {
|
|
return true;
|
|
}
|
|
var key;
|
|
// Test for A's keys different from B.
|
|
for (key in objA) {
|
|
if (objA.hasOwnProperty(key) &&
|
|
(!objB.hasOwnProperty(key) || objA[key] !== objB[key])) {
|
|
return false;
|
|
}
|
|
}
|
|
// Test for B'a keys missing from A.
|
|
for (key in objB) {
|
|
if (objB.hasOwnProperty(key) && !objA.hasOwnProperty(key)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
module.exports = ReactComponentWithPureRenderMixin;
|