How to use measureLifeCyclePerf method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactCompositeComponent.js

Source:ReactCompositeComponent.js Github

copy

Full Screen

...50function isPureComponent(Component) {51 return !!(Component.prototype && Component.prototype.isPureReactComponent);52}53// Separated into a function to contain deoptimizations caused by try/finally.54function measureLifeCyclePerf(fn, debugID, timerType) {55 if (debugID === 0) {56 // Top-level wrappers (see ReactMount) and empty components (see57 // ReactDOMEmptyComponent) are invisible to hooks and devtools.58 // Both are implementation details that should go away in the future.59 return fn();60 }61 ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);62 try {63 return fn();64 } finally {65 ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);66 }67}68/**69 * ------------------ The Life-Cycle of a Composite Component ------------------70 *71 * - constructor: Initialization of state. The instance is now retained.72 * - componentWillMount73 * - render74 * - [children's constructors]75 * - [children's componentWillMount and render]76 * - [children's componentDidMount]77 * - componentDidMount78 *79 * Update Phases:80 * - componentWillReceiveProps (only called if parent updated)81 * - shouldComponentUpdate82 * - componentWillUpdate83 * - render84 * - [children's constructors or receive props phases]85 * - componentDidUpdate86 *87 * - componentWillUnmount88 * - [children's componentWillUnmount]89 * - [children destroyed]90 * - (destroyed): The instance is now blank, released by React and ready for GC.91 *92 * -----------------------------------------------------------------------------93 */94/**95 * An incrementing ID assigned to each component when it is mounted. This is96 * used to enforce the order in which `ReactUpdates` updates dirty components.97 *98 * @private99 */100var nextMountID = 1;101/**102 * @lends {ReactCompositeComponent.prototype}103 */104var ReactCompositeComponent = {105 /**106 * Base constructor for all composite component.107 *108 * @param {ReactElement} element109 * @final110 * @internal111 */112 construct: function (element) {113 this._currentElement = element;114 this._rootNodeID = 0;115 this._compositeType = null;116 this._instance = null;117 this._hostParent = null;118 this._hostContainerInfo = null;119 // See ReactUpdateQueue120 this._updateBatchNumber = null;121 this._pendingElement = null;122 this._pendingStateQueue = null;123 this._pendingReplaceState = false;124 this._pendingForceUpdate = false;125 this._renderedNodeType = null;126 this._renderedComponent = null;127 this._context = null;128 this._mountOrder = 0;129 this._topLevelWrapper = null;130 // See ReactUpdates and ReactUpdateQueue.131 this._pendingCallbacks = null;132 // ComponentWillUnmount shall only be called once133 this._calledComponentWillUnmount = false;134 if (process.env.NODE_ENV !== 'production') {135 this._warnedAboutRefsInRender = false;136 }137 },138 /**139 * Initializes the component, renders markup, and registers event listeners.140 *141 * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction142 * @param {?object} hostParent143 * @param {?object} hostContainerInfo144 * @param {?object} context145 * @return {?string} Rendered markup to be inserted into the DOM.146 * @final147 * @internal148 */149 mountComponent: function (transaction, hostParent, hostContainerInfo, context) {150 var _this = this;151 this._context = context;152 this._mountOrder = nextMountID++;153 this._hostParent = hostParent;154 this._hostContainerInfo = hostContainerInfo;155 var publicProps = this._currentElement.props;156 var publicContext = this._processContext(context);157 var Component = this._currentElement.type;158 var updateQueue = transaction.getUpdateQueue();159 // Initialize the public class160 var doConstruct = shouldConstruct(Component);161 var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);162 var renderedElement;163 // Support functional components164 if (!doConstruct && (inst == null || inst.render == null)) {165 renderedElement = inst;166 warnIfInvalidElement(Component, renderedElement);167 !(inst === null || inst === false || React.isValidElement(inst)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component') : _prodInvariant('105', Component.displayName || Component.name || 'Component') : void 0;168 inst = new StatelessComponent(Component);169 this._compositeType = CompositeTypes.StatelessFunctional;170 } else {171 if (isPureComponent(Component)) {172 this._compositeType = CompositeTypes.PureClass;173 } else {174 this._compositeType = CompositeTypes.ImpureClass;175 }176 }177 if (process.env.NODE_ENV !== 'production') {178 // This will throw later in _renderValidatedComponent, but add an early179 // warning now to help debugging180 if (inst.render == null) {181 process.env.NODE_ENV !== 'production' ? warning(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', Component.displayName || Component.name || 'Component') : void 0;182 }183 var propsMutated = inst.props !== publicProps;184 var componentName = Component.displayName || Component.name || 'Component';185 process.env.NODE_ENV !== 'production' ? warning(inst.props === undefined || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + "up the same props that your component's constructor was passed.", componentName, componentName) : void 0;186 }187 // These should be set up in the constructor, but as a convenience for188 // simpler class abstractions, we set them up after the fact.189 inst.props = publicProps;190 inst.context = publicContext;191 inst.refs = emptyObject;192 inst.updater = updateQueue;193 this._instance = inst;194 // Store a reference from the instance back to the internal representation195 ReactInstanceMap.set(inst, this);196 if (process.env.NODE_ENV !== 'production') {197 // Since plain JS classes are defined without any special initialization198 // logic, we can not catch common errors early. Therefore, we have to199 // catch them here, at initialization time, instead.200 process.env.NODE_ENV !== 'production' ? warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved || inst.state, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component') : void 0;201 process.env.NODE_ENV !== 'production' ? warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component') : void 0;202 process.env.NODE_ENV !== 'production' ? warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component') : void 0;203 process.env.NODE_ENV !== 'production' ? warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component') : void 0;204 process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component') : void 0;205 process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component') : void 0;206 process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component') : void 0;207 }208 var initialState = inst.state;209 if (initialState === undefined) {210 inst.state = initialState = null;211 }212 !(typeof initialState === 'object' && !Array.isArray(initialState)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent') : _prodInvariant('106', this.getName() || 'ReactCompositeComponent') : void 0;213 this._pendingStateQueue = null;214 this._pendingReplaceState = false;215 this._pendingForceUpdate = false;216 var markup;217 if (inst.unstable_handleError) {218 markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);219 } else {220 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);221 }222 if (inst.componentDidMount) {223 if (process.env.NODE_ENV !== 'production') {224 transaction.getReactMountReady().enqueue(function () {225 measureLifeCyclePerf(function () {226 return inst.componentDidMount();227 }, _this._debugID, 'componentDidMount');228 });229 } else {230 transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);231 }232 }233 return markup;234 },235 _constructComponent: function (doConstruct, publicProps, publicContext, updateQueue) {236 if (process.env.NODE_ENV !== 'production') {237 ReactCurrentOwner.current = this;238 try {239 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);240 } finally {241 ReactCurrentOwner.current = null;242 }243 } else {244 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);245 }246 },247 _constructComponentWithoutOwner: function (doConstruct, publicProps, publicContext, updateQueue) {248 var Component = this._currentElement.type;249 if (doConstruct) {250 if (process.env.NODE_ENV !== 'production') {251 return measureLifeCyclePerf(function () {252 return new Component(publicProps, publicContext, updateQueue);253 }, this._debugID, 'ctor');254 } else {255 return new Component(publicProps, publicContext, updateQueue);256 }257 }258 // This can still be an instance in case of factory components259 // but we'll count this as time spent rendering as the more common case.260 if (process.env.NODE_ENV !== 'production') {261 return measureLifeCyclePerf(function () {262 return Component(publicProps, publicContext, updateQueue);263 }, this._debugID, 'render');264 } else {265 return Component(publicProps, publicContext, updateQueue);266 }267 },268 performInitialMountWithErrorHandling: function (renderedElement, hostParent, hostContainerInfo, transaction, context) {269 var markup;270 var checkpoint = transaction.checkpoint();271 try {272 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);273 } catch (e) {274 // Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint275 transaction.rollback(checkpoint);276 this._instance.unstable_handleError(e);277 if (this._pendingStateQueue) {278 this._instance.state = this._processPendingState(this._instance.props, this._instance.context);279 }280 checkpoint = transaction.checkpoint();281 this._renderedComponent.unmountComponent(true);282 transaction.rollback(checkpoint);283 // Try again - we've informed the component about the error, so they can render an error message this time.284 // If this throws again, the error will bubble up (and can be caught by a higher error boundary).285 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);286 }287 return markup;288 },289 performInitialMount: function (renderedElement, hostParent, hostContainerInfo, transaction, context) {290 var inst = this._instance;291 var debugID = 0;292 if (process.env.NODE_ENV !== 'production') {293 debugID = this._debugID;294 }295 if (inst.componentWillMount) {296 if (process.env.NODE_ENV !== 'production') {297 measureLifeCyclePerf(function () {298 return inst.componentWillMount();299 }, debugID, 'componentWillMount');300 } else {301 inst.componentWillMount();302 }303 // When mounting, calls to `setState` by `componentWillMount` will set304 // `this._pendingStateQueue` without triggering a re-render.305 if (this._pendingStateQueue) {306 inst.state = this._processPendingState(inst.props, inst.context);307 }308 }309 // If not a stateless component, we now render310 if (renderedElement === undefined) {311 renderedElement = this._renderValidatedComponent();312 }313 var nodeType = ReactNodeTypes.getType(renderedElement);314 this._renderedNodeType = nodeType;315 var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */316 );317 this._renderedComponent = child;318 var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);319 if (process.env.NODE_ENV !== 'production') {320 if (debugID !== 0) {321 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];322 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);323 }324 }325 return markup;326 },327 getHostNode: function () {328 return ReactReconciler.getHostNode(this._renderedComponent);329 },330 /**331 * Releases any resources allocated by `mountComponent`.332 *333 * @final334 * @internal335 */336 unmountComponent: function (safely) {337 if (!this._renderedComponent) {338 return;339 }340 var inst = this._instance;341 if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {342 inst._calledComponentWillUnmount = true;343 if (safely) {344 var name = this.getName() + '.componentWillUnmount()';345 ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst));346 } else {347 if (process.env.NODE_ENV !== 'production') {348 measureLifeCyclePerf(function () {349 return inst.componentWillUnmount();350 }, this._debugID, 'componentWillUnmount');351 } else {352 inst.componentWillUnmount();353 }354 }355 }356 if (this._renderedComponent) {357 ReactReconciler.unmountComponent(this._renderedComponent, safely);358 this._renderedNodeType = null;359 this._renderedComponent = null;360 this._instance = null;361 }362 // Reset pending fields363 // Even if this component is scheduled for another update in ReactUpdates,364 // it would still be ignored because these fields are reset.365 this._pendingStateQueue = null;366 this._pendingReplaceState = false;367 this._pendingForceUpdate = false;368 this._pendingCallbacks = null;369 this._pendingElement = null;370 // These fields do not really need to be reset since this object is no371 // longer accessible.372 this._context = null;373 this._rootNodeID = 0;374 this._topLevelWrapper = null;375 // Delete the reference from the instance to this internal representation376 // which allow the internals to be properly cleaned up even if the user377 // leaks a reference to the public instance.378 ReactInstanceMap.remove(inst);379 // Some existing components rely on inst.props even after they've been380 // destroyed (in event handlers).381 // TODO: inst.props = null;382 // TODO: inst.state = null;383 // TODO: inst.context = null;384 },385 /**386 * Filters the context object to only contain keys specified in387 * `contextTypes`388 *389 * @param {object} context390 * @return {?object}391 * @private392 */393 _maskContext: function (context) {394 var Component = this._currentElement.type;395 var contextTypes = Component.contextTypes;396 if (!contextTypes) {397 return emptyObject;398 }399 var maskedContext = {};400 for (var contextName in contextTypes) {401 maskedContext[contextName] = context[contextName];402 }403 return maskedContext;404 },405 /**406 * Filters the context object to only contain keys specified in407 * `contextTypes`, and asserts that they are valid.408 *409 * @param {object} context410 * @return {?object}411 * @private412 */413 _processContext: function (context) {414 var maskedContext = this._maskContext(context);415 if (process.env.NODE_ENV !== 'production') {416 var Component = this._currentElement.type;417 if (Component.contextTypes) {418 this._checkContextTypes(Component.contextTypes, maskedContext, 'context');419 }420 }421 return maskedContext;422 },423 /**424 * @param {object} currentContext425 * @return {object}426 * @private427 */428 _processChildContext: function (currentContext) {429 var Component = this._currentElement.type;430 var inst = this._instance;431 var childContext;432 if (inst.getChildContext) {433 if (process.env.NODE_ENV !== 'production') {434 ReactInstrumentation.debugTool.onBeginProcessingChildContext();435 try {436 childContext = inst.getChildContext();437 } finally {438 ReactInstrumentation.debugTool.onEndProcessingChildContext();439 }440 } else {441 childContext = inst.getChildContext();442 }443 }444 if (childContext) {445 !(typeof Component.childContextTypes === 'object') ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getChildContext(): childContextTypes must be defined in order to use getChildContext().', this.getName() || 'ReactCompositeComponent') : _prodInvariant('107', this.getName() || 'ReactCompositeComponent') : void 0;446 if (process.env.NODE_ENV !== 'production') {447 this._checkContextTypes(Component.childContextTypes, childContext, 'child context');448 }449 for (var name in childContext) {450 !(name in Component.childContextTypes) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name) : _prodInvariant('108', this.getName() || 'ReactCompositeComponent', name) : void 0;451 }452 return _assign({}, currentContext, childContext);453 }454 return currentContext;455 },456 /**457 * Assert that the context types are valid458 *459 * @param {object} typeSpecs Map of context field to a ReactPropType460 * @param {object} values Runtime values that need to be type-checked461 * @param {string} location e.g. "prop", "context", "child context"462 * @private463 */464 _checkContextTypes: function (typeSpecs, values, location) {465 if (process.env.NODE_ENV !== 'production') {466 checkReactTypeSpec(typeSpecs, values, location, this.getName(), null, this._debugID);467 }468 },469 receiveComponent: function (nextElement, transaction, nextContext) {470 var prevElement = this._currentElement;471 var prevContext = this._context;472 this._pendingElement = null;473 this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext);474 },475 /**476 * If any of `_pendingElement`, `_pendingStateQueue`, or `_pendingForceUpdate`477 * is set, update the component.478 *479 * @param {ReactReconcileTransaction} transaction480 * @internal481 */482 performUpdateIfNecessary: function (transaction) {483 if (this._pendingElement != null) {484 ReactReconciler.receiveComponent(this, this._pendingElement, transaction, this._context);485 } else if (this._pendingStateQueue !== null || this._pendingForceUpdate) {486 this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context);487 } else {488 this._updateBatchNumber = null;489 }490 },491 /**492 * Perform an update to a mounted component. The componentWillReceiveProps and493 * shouldComponentUpdate methods are called, then (assuming the update isn't494 * skipped) the remaining update lifecycle methods are called and the DOM495 * representation is updated.496 *497 * By default, this implements React's rendering and reconciliation algorithm.498 * Sophisticated clients may wish to override this.499 *500 * @param {ReactReconcileTransaction} transaction501 * @param {ReactElement} prevParentElement502 * @param {ReactElement} nextParentElement503 * @internal504 * @overridable505 */506 updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {507 var inst = this._instance;508 !(inst != null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Attempted to update component `%s` that has already been unmounted (or failed to mount).', this.getName() || 'ReactCompositeComponent') : _prodInvariant('136', this.getName() || 'ReactCompositeComponent') : void 0;509 var willReceive = false;510 var nextContext;511 // Determine if the context has changed or not512 if (this._context === nextUnmaskedContext) {513 nextContext = inst.context;514 } else {515 nextContext = this._processContext(nextUnmaskedContext);516 willReceive = true;517 }518 var prevProps = prevParentElement.props;519 var nextProps = nextParentElement.props;520 // Not a simple state update but a props update521 if (prevParentElement !== nextParentElement) {522 willReceive = true;523 }524 // An update here will schedule an update but immediately set525 // _pendingStateQueue which will ensure that any state updates gets526 // immediately reconciled instead of waiting for the next batch.527 if (willReceive && inst.componentWillReceiveProps) {528 if (process.env.NODE_ENV !== 'production') {529 measureLifeCyclePerf(function () {530 return inst.componentWillReceiveProps(nextProps, nextContext);531 }, this._debugID, 'componentWillReceiveProps');532 } else {533 inst.componentWillReceiveProps(nextProps, nextContext);534 }535 }536 var nextState = this._processPendingState(nextProps, nextContext);537 var shouldUpdate = true;538 if (!this._pendingForceUpdate) {539 if (inst.shouldComponentUpdate) {540 if (process.env.NODE_ENV !== 'production') {541 shouldUpdate = measureLifeCyclePerf(function () {542 return inst.shouldComponentUpdate(nextProps, nextState, nextContext);543 }, this._debugID, 'shouldComponentUpdate');544 } else {545 shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);546 }547 } else {548 if (this._compositeType === CompositeTypes.PureClass) {549 shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);550 }551 }552 }553 if (process.env.NODE_ENV !== 'production') {554 process.env.NODE_ENV !== 'production' ? warning(shouldUpdate !== undefined, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent') : void 0;555 }556 this._updateBatchNumber = null;557 if (shouldUpdate) {558 this._pendingForceUpdate = false;559 // Will set `this.props`, `this.state` and `this.context`.560 this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);561 } else {562 // If it's determined that a component should not update, we still want563 // to set props and state but we shortcut the rest of the update.564 this._currentElement = nextParentElement;565 this._context = nextUnmaskedContext;566 inst.props = nextProps;567 inst.state = nextState;568 inst.context = nextContext;569 }570 },571 _processPendingState: function (props, context) {572 var inst = this._instance;573 var queue = this._pendingStateQueue;574 var replace = this._pendingReplaceState;575 this._pendingReplaceState = false;576 this._pendingStateQueue = null;577 if (!queue) {578 return inst.state;579 }580 if (replace && queue.length === 1) {581 return queue[0];582 }583 var nextState = _assign({}, replace ? queue[0] : inst.state);584 for (var i = replace ? 1 : 0; i < queue.length; i++) {585 var partial = queue[i];586 _assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);587 }588 return nextState;589 },590 /**591 * Merges new props and state, notifies delegate methods of update and592 * performs update.593 *594 * @param {ReactElement} nextElement Next element595 * @param {object} nextProps Next public object to set as properties.596 * @param {?object} nextState Next object to set as state.597 * @param {?object} nextContext Next public object to set as context.598 * @param {ReactReconcileTransaction} transaction599 * @param {?object} unmaskedContext600 * @private601 */602 _performComponentUpdate: function (nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) {603 var _this2 = this;604 var inst = this._instance;605 var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);606 var prevProps;607 var prevState;608 var prevContext;609 if (hasComponentDidUpdate) {610 prevProps = inst.props;611 prevState = inst.state;612 prevContext = inst.context;613 }614 if (inst.componentWillUpdate) {615 if (process.env.NODE_ENV !== 'production') {616 measureLifeCyclePerf(function () {617 return inst.componentWillUpdate(nextProps, nextState, nextContext);618 }, this._debugID, 'componentWillUpdate');619 } else {620 inst.componentWillUpdate(nextProps, nextState, nextContext);621 }622 }623 this._currentElement = nextElement;624 this._context = unmaskedContext;625 inst.props = nextProps;626 inst.state = nextState;627 inst.context = nextContext;628 this._updateRenderedComponent(transaction, unmaskedContext);629 if (hasComponentDidUpdate) {630 if (process.env.NODE_ENV !== 'production') {631 transaction.getReactMountReady().enqueue(function () {632 measureLifeCyclePerf(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), _this2._debugID, 'componentDidUpdate');633 });634 } else {635 transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst);636 }637 }638 },639 /**640 * Call the component's `render` method and update the DOM accordingly.641 *642 * @param {ReactReconcileTransaction} transaction643 * @internal644 */645 _updateRenderedComponent: function (transaction, context) {646 var prevComponentInstance = this._renderedComponent;647 var prevRenderedElement = prevComponentInstance._currentElement;648 var nextRenderedElement = this._renderValidatedComponent();649 var debugID = 0;650 if (process.env.NODE_ENV !== 'production') {651 debugID = this._debugID;652 }653 if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {654 ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context));655 } else {656 var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);657 ReactReconciler.unmountComponent(prevComponentInstance, false);658 var nodeType = ReactNodeTypes.getType(nextRenderedElement);659 this._renderedNodeType = nodeType;660 var child = this._instantiateReactComponent(nextRenderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */661 );662 this._renderedComponent = child;663 var nextMarkup = ReactReconciler.mountComponent(child, transaction, this._hostParent, this._hostContainerInfo, this._processChildContext(context), debugID);664 if (process.env.NODE_ENV !== 'production') {665 if (debugID !== 0) {666 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];667 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);668 }669 }670 this._replaceNodeWithMarkup(oldHostNode, nextMarkup, prevComponentInstance);671 }672 },673 /**674 * Overridden in shallow rendering.675 *676 * @protected677 */678 _replaceNodeWithMarkup: function (oldHostNode, nextMarkup, prevInstance) {679 ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance);680 },681 /**682 * @protected683 */684 _renderValidatedComponentWithoutOwnerOrContext: function () {685 var inst = this._instance;686 var renderedElement;687 if (process.env.NODE_ENV !== 'production') {688 renderedElement = measureLifeCyclePerf(function () {689 return inst.render();690 }, this._debugID, 'render');691 } else {692 renderedElement = inst.render();693 }694 if (process.env.NODE_ENV !== 'production') {695 // We allow auto-mocks to proceed as if they're returning null.696 if (renderedElement === undefined && inst.render._isMockFunction) {697 // This is probably bad practice. Consider warning here and698 // deprecating this convenience.699 renderedElement = null;700 }701 }702 return renderedElement;...

Full Screen

Full Screen

2757f844bdb396ff286c47a8cd53eecba53a12ReactCompositeComponent.js

Source:2757f844bdb396ff286c47a8cd53eecba53a12ReactCompositeComponent.js Github

copy

Full Screen

...30}31function isPureComponent(Component) {32 return !!(Component.prototype && Component.prototype.isPureReactComponent);33}34function measureLifeCyclePerf(fn, debugID, timerType) {35 if (debugID === 0) {36 return fn();37 }38 ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);39 try {40 return fn();41 } finally {42 ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);43 }44}45var nextMountID = 1;46var ReactCompositeComponent = {47 construct: function construct(element) {48 this._currentElement = element;49 this._rootNodeID = 0;50 this._compositeType = null;51 this._instance = null;52 this._hostParent = null;53 this._hostContainerInfo = null;54 this._updateBatchNumber = null;55 this._pendingElement = null;56 this._pendingStateQueue = null;57 this._pendingReplaceState = false;58 this._pendingForceUpdate = false;59 this._renderedNodeType = null;60 this._renderedComponent = null;61 this._context = null;62 this._mountOrder = 0;63 this._topLevelWrapper = null;64 this._pendingCallbacks = null;65 this._calledComponentWillUnmount = false;66 if (__DEV__) {67 this._warnedAboutRefsInRender = false;68 }69 },70 mountComponent: function mountComponent(transaction, hostParent, hostContainerInfo, context) {71 var _this = this;72 this._context = context;73 this._mountOrder = nextMountID++;74 this._hostParent = hostParent;75 this._hostContainerInfo = hostContainerInfo;76 var publicProps = this._currentElement.props;77 var publicContext = this._processContext(context);78 var Component = this._currentElement.type;79 var updateQueue = transaction.getUpdateQueue();80 var doConstruct = shouldConstruct(Component);81 var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);82 var renderedElement;83 if (!doConstruct && (inst == null || inst.render == null)) {84 renderedElement = inst;85 if (__DEV__) {86 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');87 }88 invariant(inst === null || inst === false || React.isValidElement(inst), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component');89 inst = new StatelessComponent(Component);90 this._compositeType = ReactCompositeComponentTypes.StatelessFunctional;91 } else {92 if (isPureComponent(Component)) {93 this._compositeType = ReactCompositeComponentTypes.PureClass;94 } else {95 this._compositeType = ReactCompositeComponentTypes.ImpureClass;96 }97 }98 if (__DEV__) {99 if (inst.render == null) {100 warning(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', Component.displayName || Component.name || 'Component');101 }102 var propsMutated = inst.props !== publicProps;103 var componentName = Component.displayName || Component.name || 'Component';104 warning(inst.props === undefined || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + "up the same props that your component's constructor was passed.", componentName, componentName);105 }106 inst.props = publicProps;107 inst.context = publicContext;108 inst.refs = emptyObject;109 inst.updater = updateQueue;110 this._instance = inst;111 ReactInstanceMap.set(inst, this);112 if (__DEV__) {113 warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved || inst.state, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component');114 warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component');115 warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component');116 warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component');117 warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component');118 warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component');119 warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component');120 }121 var initialState = inst.state;122 if (initialState === undefined) {123 inst.state = initialState = null;124 }125 invariant(typeof initialState === 'object' && !Array.isArray(initialState), '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent');126 this._pendingStateQueue = null;127 this._pendingReplaceState = false;128 this._pendingForceUpdate = false;129 if (inst.componentWillMount) {130 if (__DEV__) {131 measureLifeCyclePerf(function () {132 return inst.componentWillMount();133 }, this._debugID, 'componentWillMount');134 } else {135 inst.componentWillMount();136 }137 if (this._pendingStateQueue) {138 inst.state = this._processPendingState(inst.props, inst.context);139 }140 }141 var markup;142 if (inst.unstable_handleError) {143 markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);144 } else {145 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);146 }147 if (inst.componentDidMount) {148 if (__DEV__) {149 transaction.getReactMountReady().enqueue(function () {150 measureLifeCyclePerf(function () {151 return inst.componentDidMount();152 }, _this._debugID, 'componentDidMount');153 });154 } else {155 transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);156 }157 }158 var callbacks = this._pendingCallbacks;159 if (callbacks) {160 this._pendingCallbacks = null;161 for (var i = 0; i < callbacks.length; i++) {162 transaction.getReactMountReady().enqueue(callbacks[i], inst);163 }164 }165 return markup;166 },167 _constructComponent: function _constructComponent(doConstruct, publicProps, publicContext, updateQueue) {168 if (__DEV__) {169 ReactCurrentOwner.current = this;170 try {171 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);172 } finally {173 ReactCurrentOwner.current = null;174 }175 } else {176 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);177 }178 },179 _constructComponentWithoutOwner: function _constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue) {180 var Component = this._currentElement.type;181 if (doConstruct) {182 if (__DEV__) {183 return measureLifeCyclePerf(function () {184 return new Component(publicProps, publicContext, updateQueue);185 }, this._debugID, 'ctor');186 } else {187 return new Component(publicProps, publicContext, updateQueue);188 }189 }190 if (__DEV__) {191 return measureLifeCyclePerf(function () {192 return Component(publicProps, publicContext, updateQueue);193 }, this._debugID, 'render');194 } else {195 return Component(publicProps, publicContext, updateQueue);196 }197 },198 performInitialMountWithErrorHandling: function performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context) {199 var markup;200 var checkpoint = transaction.checkpoint();201 try {202 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);203 } catch (e) {204 transaction.rollback(checkpoint);205 this._instance.unstable_handleError(e);206 if (this._pendingStateQueue) {207 this._instance.state = this._processPendingState(this._instance.props, this._instance.context);208 }209 checkpoint = transaction.checkpoint();210 this._renderedComponent.unmountComponent(true, true);211 transaction.rollback(checkpoint);212 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);213 }214 return markup;215 },216 performInitialMount: function performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context) {217 if (renderedElement === undefined) {218 renderedElement = this._renderValidatedComponent();219 }220 var nodeType = ReactNodeTypes.getType(renderedElement);221 this._renderedNodeType = nodeType;222 var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY);223 this._renderedComponent = child;224 var debugID = 0;225 if (__DEV__) {226 debugID = this._debugID;227 }228 var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);229 if (__DEV__) {230 if (debugID !== 0) {231 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];232 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);233 }234 }235 return markup;236 },237 getHostNode: function getHostNode() {238 return ReactReconciler.getHostNode(this._renderedComponent);239 },240 unmountComponent: function unmountComponent(safely, skipLifecycle) {241 if (!this._renderedComponent) {242 return;243 }244 var inst = this._instance;245 if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {246 inst._calledComponentWillUnmount = true;247 if (safely) {248 if (!skipLifecycle) {249 var name = this.getName() + '.componentWillUnmount()';250 ReactErrorUtils.invokeGuardedCallbackAndCatchFirstError(name, inst.componentWillUnmount, inst);251 }252 } else {253 if (__DEV__) {254 measureLifeCyclePerf(function () {255 return inst.componentWillUnmount();256 }, this._debugID, 'componentWillUnmount');257 } else {258 inst.componentWillUnmount();259 }260 }261 }262 if (this._renderedComponent) {263 ReactReconciler.unmountComponent(this._renderedComponent, safely, skipLifecycle);264 this._renderedNodeType = null;265 this._renderedComponent = null;266 this._instance = null;267 }268 this._pendingStateQueue = null;269 this._pendingReplaceState = false;270 this._pendingForceUpdate = false;271 this._pendingCallbacks = null;272 this._pendingElement = null;273 this._context = null;274 this._rootNodeID = 0;275 this._topLevelWrapper = null;276 ReactInstanceMap.remove(inst);277 },278 _maskContext: function _maskContext(context) {279 var Component = this._currentElement.type;280 var contextTypes = Component.contextTypes;281 if (!contextTypes) {282 return emptyObject;283 }284 var maskedContext = {};285 for (var contextName in contextTypes) {286 maskedContext[contextName] = context[contextName];287 }288 return maskedContext;289 },290 _processContext: function _processContext(context) {291 var maskedContext = this._maskContext(context);292 if (__DEV__) {293 var Component = this._currentElement.type;294 if (Component.contextTypes) {295 this._checkContextTypes(Component.contextTypes, maskedContext, 'context');296 }297 }298 return maskedContext;299 },300 _processChildContext: function _processChildContext(currentContext) {301 var Component = this._currentElement.type;302 var inst = this._instance;303 var childContext;304 if (typeof inst.getChildContext === 'function') {305 if (__DEV__) {306 ReactInstrumentation.debugTool.onBeginProcessingChildContext();307 try {308 childContext = inst.getChildContext();309 } finally {310 ReactInstrumentation.debugTool.onEndProcessingChildContext();311 }312 } else {313 childContext = inst.getChildContext();314 }315 invariant(typeof Component.childContextTypes === 'object', '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', this.getName() || 'ReactCompositeComponent');316 if (__DEV__) {317 this._checkContextTypes(Component.childContextTypes, childContext, 'child context');318 }319 for (var name in childContext) {320 invariant(name in Component.childContextTypes, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name);321 }322 return babelHelpers.extends({}, currentContext, childContext);323 } else {324 if (__DEV__) {325 var componentName = this.getName();326 if (!warningAboutMissingGetChildContext[componentName]) {327 warningAboutMissingGetChildContext[componentName] = true;328 warning(!Component.childContextTypes, '%s.childContextTypes is specified but there is no getChildContext() method ' + 'on the instance. You can either define getChildContext() on %s or remove ' + 'childContextTypes from it.', componentName, componentName);329 }330 }331 }332 return currentContext;333 },334 _checkContextTypes: function _checkContextTypes(typeSpecs, values, location) {335 if (__DEV__) {336 ReactDebugCurrentFrame.current = this._debugID;337 checkReactTypeSpec(typeSpecs, values, location, this.getName());338 ReactDebugCurrentFrame.current = null;339 }340 },341 receiveComponent: function receiveComponent(nextElement, transaction, nextContext) {342 var prevElement = this._currentElement;343 var prevContext = this._context;344 this._pendingElement = null;345 this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext);346 },347 performUpdateIfNecessary: function performUpdateIfNecessary(transaction) {348 if (this._pendingElement != null) {349 ReactReconciler.receiveComponent(this, this._pendingElement, transaction, this._context);350 } else if (this._pendingStateQueue !== null || this._pendingForceUpdate) {351 this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context);352 } else {353 var callbacks = this._pendingCallbacks;354 this._pendingCallbacks = null;355 if (callbacks) {356 for (var j = 0; j < callbacks.length; j++) {357 transaction.getReactMountReady().enqueue(callbacks[j], this.getPublicInstance());358 }359 }360 this._updateBatchNumber = null;361 }362 },363 updateComponent: function updateComponent(transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {364 var inst = this._instance;365 invariant(inst != null, 'Attempted to update component `%s` that has already been unmounted ' + '(or failed to mount).', this.getName() || 'ReactCompositeComponent');366 var willReceive = false;367 var nextContext;368 if (this._context === nextUnmaskedContext) {369 nextContext = inst.context;370 } else {371 nextContext = this._processContext(nextUnmaskedContext);372 willReceive = true;373 }374 var prevProps = prevParentElement.props;375 var nextProps = nextParentElement.props;376 if (prevParentElement !== nextParentElement) {377 willReceive = true;378 }379 if (willReceive && inst.componentWillReceiveProps) {380 var beforeState = inst.state;381 if (__DEV__) {382 measureLifeCyclePerf(function () {383 return inst.componentWillReceiveProps(nextProps, nextContext);384 }, this._debugID, 'componentWillReceiveProps');385 } else {386 inst.componentWillReceiveProps(nextProps, nextContext);387 }388 var afterState = inst.state;389 if (beforeState !== afterState) {390 inst.state = beforeState;391 inst.updater.enqueueReplaceState(inst, afterState);392 if (__DEV__) {393 warning(false, '%s.componentWillReceiveProps(): Assigning directly to ' + "this.state is deprecated (except inside a component's " + 'constructor). Use setState instead.', this.getName() || 'ReactCompositeComponent');394 }395 }396 }397 var callbacks = this._pendingCallbacks;398 this._pendingCallbacks = null;399 var nextState = this._processPendingState(nextProps, nextContext);400 var shouldUpdate = true;401 if (!this._pendingForceUpdate) {402 var prevState = inst.state;403 shouldUpdate = willReceive || nextState !== prevState;404 if (inst.shouldComponentUpdate) {405 if (__DEV__) {406 shouldUpdate = measureLifeCyclePerf(function () {407 return inst.shouldComponentUpdate(nextProps, nextState, nextContext);408 }, this._debugID, 'shouldComponentUpdate');409 } else {410 shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);411 }412 } else {413 if (this._compositeType === ReactCompositeComponentTypes.PureClass) {414 shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);415 }416 }417 }418 if (__DEV__) {419 warning(shouldUpdate !== undefined, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent');420 }421 this._updateBatchNumber = null;422 if (shouldUpdate) {423 this._pendingForceUpdate = false;424 this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);425 } else {426 this._currentElement = nextParentElement;427 this._context = nextUnmaskedContext;428 inst.props = nextProps;429 inst.state = nextState;430 inst.context = nextContext;431 }432 if (callbacks) {433 for (var j = 0; j < callbacks.length; j++) {434 transaction.getReactMountReady().enqueue(callbacks[j], this.getPublicInstance());435 }436 }437 },438 _processPendingState: function _processPendingState(props, context) {439 var inst = this._instance;440 var queue = this._pendingStateQueue;441 var replace = this._pendingReplaceState;442 this._pendingReplaceState = false;443 this._pendingStateQueue = null;444 if (!queue) {445 return inst.state;446 }447 if (replace && queue.length === 1) {448 return queue[0];449 }450 var nextState = replace ? queue[0] : inst.state;451 var dontMutate = true;452 for (var i = replace ? 1 : 0; i < queue.length; i++) {453 var partial = queue[i];454 var partialState = typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial;455 if (partialState) {456 if (dontMutate) {457 dontMutate = false;458 nextState = babelHelpers.extends({}, nextState, partialState);459 } else {460 babelHelpers.extends(nextState, partialState);461 }462 }463 }464 return nextState;465 },466 _performComponentUpdate: function _performComponentUpdate(nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) {467 var _this2 = this;468 var inst = this._instance;469 var hasComponentDidUpdate = !!inst.componentDidUpdate;470 var prevProps;471 var prevState;472 var prevContext;473 if (hasComponentDidUpdate) {474 prevProps = inst.props;475 prevState = inst.state;476 prevContext = inst.context;477 }478 if (inst.componentWillUpdate) {479 if (__DEV__) {480 measureLifeCyclePerf(function () {481 return inst.componentWillUpdate(nextProps, nextState, nextContext);482 }, this._debugID, 'componentWillUpdate');483 } else {484 inst.componentWillUpdate(nextProps, nextState, nextContext);485 }486 }487 this._currentElement = nextElement;488 this._context = unmaskedContext;489 inst.props = nextProps;490 inst.state = nextState;491 inst.context = nextContext;492 if (inst.unstable_handleError) {493 this._updateRenderedComponentWithErrorHandling(transaction, unmaskedContext);494 } else {495 this._updateRenderedComponent(transaction, unmaskedContext);496 }497 if (hasComponentDidUpdate) {498 if (__DEV__) {499 transaction.getReactMountReady().enqueue(function () {500 measureLifeCyclePerf(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), _this2._debugID, 'componentDidUpdate');501 });502 } else {503 transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst);504 }505 }506 },507 _updateRenderedComponentWithErrorHandling: function _updateRenderedComponentWithErrorHandling(transaction, context) {508 var checkpoint = transaction.checkpoint();509 try {510 this._updateRenderedComponent(transaction, context);511 } catch (e) {512 transaction.rollback(checkpoint);513 this._instance.unstable_handleError(e);514 if (this._pendingStateQueue) {515 this._instance.state = this._processPendingState(this._instance.props, this._instance.context);516 }517 checkpoint = transaction.checkpoint();518 this._updateRenderedComponentWithNextElement(transaction, context, null, true);519 this._updateRenderedComponent(transaction, context);520 }521 },522 _updateRenderedComponent: function _updateRenderedComponent(transaction, context) {523 var nextRenderedElement = this._renderValidatedComponent();524 this._updateRenderedComponentWithNextElement(transaction, context, nextRenderedElement, false);525 },526 _updateRenderedComponentWithNextElement: function _updateRenderedComponentWithNextElement(transaction, context, nextRenderedElement, safely) {527 var prevComponentInstance = this._renderedComponent;528 var prevRenderedElement = prevComponentInstance._currentElement;529 var debugID = 0;530 if (__DEV__) {531 debugID = this._debugID;532 }533 if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {534 ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context));535 } else {536 var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);537 if (!ReactFeatureFlags.prepareNewChildrenBeforeUnmountInStack) {538 ReactReconciler.unmountComponent(prevComponentInstance, safely, false);539 }540 var nodeType = ReactNodeTypes.getType(nextRenderedElement);541 this._renderedNodeType = nodeType;542 var child = this._instantiateReactComponent(nextRenderedElement, nodeType !== ReactNodeTypes.EMPTY);543 this._renderedComponent = child;544 var nextMarkup = ReactReconciler.mountComponent(child, transaction, this._hostParent, this._hostContainerInfo, this._processChildContext(context), debugID);545 if (ReactFeatureFlags.prepareNewChildrenBeforeUnmountInStack) {546 ReactReconciler.unmountComponent(prevComponentInstance, safely, false);547 }548 if (__DEV__) {549 if (debugID !== 0) {550 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];551 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);552 }553 }554 this._replaceNodeWithMarkup(oldHostNode, nextMarkup, prevComponentInstance);555 }556 },557 _replaceNodeWithMarkup: function _replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance) {558 ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance);559 },560 _renderValidatedComponentWithoutOwnerOrContext: function _renderValidatedComponentWithoutOwnerOrContext() {561 var inst = this._instance;562 var renderedElement;563 if (__DEV__) {564 renderedElement = measureLifeCyclePerf(function () {565 return inst.render();566 }, this._debugID, 'render');567 } else {568 renderedElement = inst.render();569 }570 if (__DEV__) {571 if (renderedElement === undefined && inst.render._isMockFunction) {572 renderedElement = null;573 }574 }575 return renderedElement;576 },577 _renderValidatedComponent: function _renderValidatedComponent() {578 var renderedElement;...

Full Screen

Full Screen

517f55ReactCompositeComponent.js

Source:517f55ReactCompositeComponent.js Github

copy

Full Screen

...38}39function isPureComponent(Component) {40 return !!(Component.prototype && Component.prototype.isPureReactComponent);41}42function measureLifeCyclePerf(fn, debugID, timerType) {43 if (debugID === 0) {44 return fn();45 }46 ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);47 try {48 return fn();49 } finally {50 ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);51 }52}53var nextMountID = 1;54var ReactCompositeComponent = {55 construct: function construct(element) {56 this._currentElement = element;57 this._rootNodeID = 0;58 this._compositeType = null;59 this._instance = null;60 this._hostParent = null;61 this._hostContainerInfo = null;62 this._updateBatchNumber = null;63 this._pendingElement = null;64 this._pendingStateQueue = null;65 this._pendingReplaceState = false;66 this._pendingForceUpdate = false;67 this._renderedNodeType = null;68 this._renderedComponent = null;69 this._context = null;70 this._mountOrder = 0;71 this._topLevelWrapper = null;72 this._pendingCallbacks = null;73 this._calledComponentWillUnmount = false;74 if (__DEV__) {75 this._warnedAboutRefsInRender = false;76 }77 },78 mountComponent: function mountComponent(transaction, hostParent, hostContainerInfo, context) {79 var _this = this;80 this._context = context;81 this._mountOrder = nextMountID++;82 this._hostParent = hostParent;83 this._hostContainerInfo = hostContainerInfo;84 var publicProps = this._currentElement.props;85 var publicContext = this._processContext(context);86 var Component = this._currentElement.type;87 var updateQueue = transaction.getUpdateQueue();88 var doConstruct = shouldConstruct(Component);89 var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);90 var renderedElement;91 if (!doConstruct && (inst == null || inst.render == null)) {92 renderedElement = inst;93 warnIfInvalidElement(Component, renderedElement);94 invariant(inst === null || inst === false || React.isValidElement(inst), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component');95 inst = new StatelessComponent(Component);96 this._compositeType = CompositeTypes.StatelessFunctional;97 } else {98 if (isPureComponent(Component)) {99 this._compositeType = CompositeTypes.PureClass;100 } else {101 this._compositeType = CompositeTypes.ImpureClass;102 }103 }104 if (__DEV__) {105 if (inst.render == null) {106 warning(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', Component.displayName || Component.name || 'Component');107 }108 var propsMutated = inst.props !== publicProps;109 var componentName = Component.displayName || Component.name || 'Component';110 warning(inst.props === undefined || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + 'up the same props that your component\'s constructor was passed.', componentName, componentName);111 }112 inst.props = publicProps;113 inst.context = publicContext;114 inst.refs = emptyObject;115 inst.updater = updateQueue;116 this._instance = inst;117 ReactInstanceMap.set(inst, this);118 if (__DEV__) {119 warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component');120 warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component');121 warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component');122 warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component');123 warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component');124 warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component');125 warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component');126 }127 var initialState = inst.state;128 if (initialState === undefined) {129 inst.state = initialState = null;130 }131 invariant(typeof initialState === 'object' && !Array.isArray(initialState), '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent');132 this._pendingStateQueue = null;133 this._pendingReplaceState = false;134 this._pendingForceUpdate = false;135 var markup;136 if (inst.unstable_handleError) {137 markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);138 } else {139 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);140 }141 if (inst.componentDidMount) {142 if (__DEV__) {143 transaction.getReactMountReady().enqueue(function () {144 measureLifeCyclePerf(function () {145 return inst.componentDidMount();146 }, _this._debugID, 'componentDidMount');147 });148 } else {149 transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);150 }151 }152 return markup;153 },154 _constructComponent: function _constructComponent(doConstruct, publicProps, publicContext, updateQueue) {155 if (__DEV__) {156 ReactCurrentOwner.current = this;157 try {158 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);159 } finally {160 ReactCurrentOwner.current = null;161 }162 } else {163 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);164 }165 },166 _constructComponentWithoutOwner: function _constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue) {167 var Component = this._currentElement.type;168 if (doConstruct) {169 if (__DEV__) {170 return measureLifeCyclePerf(function () {171 return new Component(publicProps, publicContext, updateQueue);172 }, this._debugID, 'ctor');173 } else {174 return new Component(publicProps, publicContext, updateQueue);175 }176 }177 if (__DEV__) {178 return measureLifeCyclePerf(function () {179 return Component(publicProps, publicContext, updateQueue);180 }, this._debugID, 'render');181 } else {182 return Component(publicProps, publicContext, updateQueue);183 }184 },185 performInitialMountWithErrorHandling: function performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context) {186 var markup;187 var checkpoint = transaction.checkpoint();188 try {189 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);190 } catch (e) {191 transaction.rollback(checkpoint);192 this._instance.unstable_handleError(e);193 if (this._pendingStateQueue) {194 this._instance.state = this._processPendingState(this._instance.props, this._instance.context);195 }196 checkpoint = transaction.checkpoint();197 this._renderedComponent.unmountComponent(true);198 transaction.rollback(checkpoint);199 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);200 }201 return markup;202 },203 performInitialMount: function performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context) {204 var inst = this._instance;205 var debugID = 0;206 if (__DEV__) {207 debugID = this._debugID;208 }209 if (inst.componentWillMount) {210 if (__DEV__) {211 measureLifeCyclePerf(function () {212 return inst.componentWillMount();213 }, debugID, 'componentWillMount');214 } else {215 inst.componentWillMount();216 }217 if (this._pendingStateQueue) {218 inst.state = this._processPendingState(inst.props, inst.context);219 }220 }221 if (renderedElement === undefined) {222 renderedElement = this._renderValidatedComponent();223 }224 var nodeType = ReactNodeTypes.getType(renderedElement);225 this._renderedNodeType = nodeType;226 var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY);227 this._renderedComponent = child;228 var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);229 if (__DEV__) {230 if (debugID !== 0) {231 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];232 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);233 }234 }235 return markup;236 },237 getHostNode: function getHostNode() {238 return ReactReconciler.getHostNode(this._renderedComponent);239 },240 unmountComponent: function unmountComponent(safely) {241 if (!this._renderedComponent) {242 return;243 }244 var inst = this._instance;245 if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {246 inst._calledComponentWillUnmount = true;247 if (safely) {248 var name = this.getName() + '.componentWillUnmount()';249 ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst));250 } else {251 if (__DEV__) {252 measureLifeCyclePerf(function () {253 return inst.componentWillUnmount();254 }, this._debugID, 'componentWillUnmount');255 } else {256 inst.componentWillUnmount();257 }258 }259 }260 if (this._renderedComponent) {261 ReactReconciler.unmountComponent(this._renderedComponent, safely);262 this._renderedNodeType = null;263 this._renderedComponent = null;264 this._instance = null;265 }266 this._pendingStateQueue = null;267 this._pendingReplaceState = false;268 this._pendingForceUpdate = false;269 this._pendingCallbacks = null;270 this._pendingElement = null;271 this._context = null;272 this._rootNodeID = 0;273 this._topLevelWrapper = null;274 ReactInstanceMap.remove(inst);275 },276 _maskContext: function _maskContext(context) {277 var Component = this._currentElement.type;278 var contextTypes = Component.contextTypes;279 if (!contextTypes) {280 return emptyObject;281 }282 var maskedContext = {};283 for (var contextName in contextTypes) {284 maskedContext[contextName] = context[contextName];285 }286 return maskedContext;287 },288 _processContext: function _processContext(context) {289 var maskedContext = this._maskContext(context);290 if (__DEV__) {291 var Component = this._currentElement.type;292 if (Component.contextTypes) {293 this._checkContextTypes(Component.contextTypes, maskedContext, 'context');294 }295 }296 return maskedContext;297 },298 _processChildContext: function _processChildContext(currentContext) {299 var Component = this._currentElement.type;300 var inst = this._instance;301 var childContext;302 if (inst.getChildContext) {303 if (__DEV__) {304 ReactInstrumentation.debugTool.onBeginProcessingChildContext();305 try {306 childContext = inst.getChildContext();307 } finally {308 ReactInstrumentation.debugTool.onEndProcessingChildContext();309 }310 } else {311 childContext = inst.getChildContext();312 }313 }314 if (childContext) {315 invariant(typeof Component.childContextTypes === 'object', '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', this.getName() || 'ReactCompositeComponent');316 if (__DEV__) {317 this._checkContextTypes(Component.childContextTypes, childContext, 'childContext');318 }319 for (var name in childContext) {320 invariant(name in Component.childContextTypes, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name);321 }322 return babelHelpers.extends({}, currentContext, childContext);323 }324 return currentContext;325 },326 _checkContextTypes: function _checkContextTypes(typeSpecs, values, location) {327 if (__DEV__) {328 checkReactTypeSpec(typeSpecs, values, location, this.getName(), null, this._debugID);329 }330 },331 receiveComponent: function receiveComponent(nextElement, transaction, nextContext) {332 var prevElement = this._currentElement;333 var prevContext = this._context;334 this._pendingElement = null;335 this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext);336 },337 performUpdateIfNecessary: function performUpdateIfNecessary(transaction) {338 if (this._pendingElement != null) {339 ReactReconciler.receiveComponent(this, this._pendingElement, transaction, this._context);340 } else if (this._pendingStateQueue !== null || this._pendingForceUpdate) {341 this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context);342 } else {343 this._updateBatchNumber = null;344 }345 },346 updateComponent: function updateComponent(transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {347 var inst = this._instance;348 invariant(inst != null, 'Attempted to update component `%s` that has already been unmounted ' + '(or failed to mount).', this.getName() || 'ReactCompositeComponent');349 var willReceive = false;350 var nextContext;351 if (this._context === nextUnmaskedContext) {352 nextContext = inst.context;353 } else {354 nextContext = this._processContext(nextUnmaskedContext);355 willReceive = true;356 }357 var prevProps = prevParentElement.props;358 var nextProps = nextParentElement.props;359 if (prevParentElement !== nextParentElement) {360 willReceive = true;361 }362 if (willReceive && inst.componentWillReceiveProps) {363 if (__DEV__) {364 measureLifeCyclePerf(function () {365 return inst.componentWillReceiveProps(nextProps, nextContext);366 }, this._debugID, 'componentWillReceiveProps');367 } else {368 inst.componentWillReceiveProps(nextProps, nextContext);369 }370 }371 var nextState = this._processPendingState(nextProps, nextContext);372 var shouldUpdate = true;373 if (!this._pendingForceUpdate) {374 if (inst.shouldComponentUpdate) {375 if (__DEV__) {376 shouldUpdate = measureLifeCyclePerf(function () {377 return inst.shouldComponentUpdate(nextProps, nextState, nextContext);378 }, this._debugID, 'shouldComponentUpdate');379 } else {380 shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);381 }382 } else {383 if (this._compositeType === CompositeTypes.PureClass) {384 shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);385 }386 }387 }388 if (__DEV__) {389 warning(shouldUpdate !== undefined, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent');390 }391 this._updateBatchNumber = null;392 if (shouldUpdate) {393 this._pendingForceUpdate = false;394 this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);395 } else {396 this._currentElement = nextParentElement;397 this._context = nextUnmaskedContext;398 inst.props = nextProps;399 inst.state = nextState;400 inst.context = nextContext;401 }402 },403 _processPendingState: function _processPendingState(props, context) {404 var inst = this._instance;405 var queue = this._pendingStateQueue;406 var replace = this._pendingReplaceState;407 this._pendingReplaceState = false;408 this._pendingStateQueue = null;409 if (!queue) {410 return inst.state;411 }412 if (replace && queue.length === 1) {413 return queue[0];414 }415 var nextState = babelHelpers.extends({}, replace ? queue[0] : inst.state);416 for (var i = replace ? 1 : 0; i < queue.length; i++) {417 var partial = queue[i];418 babelHelpers.extends(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);419 }420 return nextState;421 },422 _performComponentUpdate: function _performComponentUpdate(nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) {423 var _this2 = this;424 var inst = this._instance;425 var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);426 var prevProps;427 var prevState;428 var prevContext;429 if (hasComponentDidUpdate) {430 prevProps = inst.props;431 prevState = inst.state;432 prevContext = inst.context;433 }434 if (inst.componentWillUpdate) {435 if (__DEV__) {436 measureLifeCyclePerf(function () {437 return inst.componentWillUpdate(nextProps, nextState, nextContext);438 }, this._debugID, 'componentWillUpdate');439 } else {440 inst.componentWillUpdate(nextProps, nextState, nextContext);441 }442 }443 this._currentElement = nextElement;444 this._context = unmaskedContext;445 inst.props = nextProps;446 inst.state = nextState;447 inst.context = nextContext;448 this._updateRenderedComponent(transaction, unmaskedContext);449 if (hasComponentDidUpdate) {450 if (__DEV__) {451 transaction.getReactMountReady().enqueue(function () {452 measureLifeCyclePerf(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), _this2._debugID, 'componentDidUpdate');453 });454 } else {455 transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst);456 }457 }458 },459 _updateRenderedComponent: function _updateRenderedComponent(transaction, context) {460 var prevComponentInstance = this._renderedComponent;461 var prevRenderedElement = prevComponentInstance._currentElement;462 var nextRenderedElement = this._renderValidatedComponent();463 var debugID = 0;464 if (__DEV__) {465 debugID = this._debugID;466 }467 if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {468 ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context));469 } else {470 var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);471 ReactReconciler.unmountComponent(prevComponentInstance, false);472 var nodeType = ReactNodeTypes.getType(nextRenderedElement);473 this._renderedNodeType = nodeType;474 var child = this._instantiateReactComponent(nextRenderedElement, nodeType !== ReactNodeTypes.EMPTY);475 this._renderedComponent = child;476 var nextMarkup = ReactReconciler.mountComponent(child, transaction, this._hostParent, this._hostContainerInfo, this._processChildContext(context), debugID);477 if (__DEV__) {478 if (debugID !== 0) {479 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];480 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);481 }482 }483 this._replaceNodeWithMarkup(oldHostNode, nextMarkup, prevComponentInstance);484 }485 },486 _replaceNodeWithMarkup: function _replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance) {487 ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance);488 },489 _renderValidatedComponentWithoutOwnerOrContext: function _renderValidatedComponentWithoutOwnerOrContext() {490 var inst = this._instance;491 var renderedElement;492 if (__DEV__) {493 renderedElement = measureLifeCyclePerf(function () {494 return inst.render();495 }, this._debugID, 'render');496 } else {497 renderedElement = inst.render();498 }499 if (__DEV__) {500 if (renderedElement === undefined && inst.render._isMockFunction) {501 renderedElement = null;502 }503 }504 return renderedElement;505 },506 _renderValidatedComponent: function _renderValidatedComponent() {507 var renderedElement;...

Full Screen

Full Screen

c34aaaReactCompositeComponent.js

Source:c34aaaReactCompositeComponent.js Github

copy

Full Screen

...38}39function isPureComponent(Component) {40 return !!(Component.prototype && Component.prototype.isPureReactComponent);41}42function measureLifeCyclePerf(fn, debugID, timerType) {43 if (debugID === 0) {44 return fn();45 }46 ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);47 try {48 return fn();49 } finally {50 ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);51 }52}53var nextMountID = 1;54var ReactCompositeComponent = {55 construct: function construct(element) {56 this._currentElement = element;57 this._rootNodeID = 0;58 this._compositeType = null;59 this._instance = null;60 this._hostParent = null;61 this._hostContainerInfo = null;62 this._updateBatchNumber = null;63 this._pendingElement = null;64 this._pendingStateQueue = null;65 this._pendingReplaceState = false;66 this._pendingForceUpdate = false;67 this._renderedNodeType = null;68 this._renderedComponent = null;69 this._context = null;70 this._mountOrder = 0;71 this._topLevelWrapper = null;72 this._pendingCallbacks = null;73 this._calledComponentWillUnmount = false;74 if (__DEV__) {75 this._warnedAboutRefsInRender = false;76 }77 },78 mountComponent: function mountComponent(transaction, hostParent, hostContainerInfo, context) {79 var _this = this;80 this._context = context;81 this._mountOrder = nextMountID++;82 this._hostParent = hostParent;83 this._hostContainerInfo = hostContainerInfo;84 var publicProps = this._currentElement.props;85 var publicContext = this._processContext(context);86 var Component = this._currentElement.type;87 var updateQueue = transaction.getUpdateQueue();88 var doConstruct = shouldConstruct(Component);89 var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);90 var renderedElement;91 if (!doConstruct && (inst == null || inst.render == null)) {92 renderedElement = inst;93 warnIfInvalidElement(Component, renderedElement);94 invariant(inst === null || inst === false || React.isValidElement(inst), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component');95 inst = new StatelessComponent(Component);96 this._compositeType = CompositeTypes.StatelessFunctional;97 } else {98 if (isPureComponent(Component)) {99 this._compositeType = CompositeTypes.PureClass;100 } else {101 this._compositeType = CompositeTypes.ImpureClass;102 }103 }104 if (__DEV__) {105 if (inst.render == null) {106 warning(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', Component.displayName || Component.name || 'Component');107 }108 var propsMutated = inst.props !== publicProps;109 var componentName = Component.displayName || Component.name || 'Component';110 warning(inst.props === undefined || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + 'up the same props that your component\'s constructor was passed.', componentName, componentName);111 }112 inst.props = publicProps;113 inst.context = publicContext;114 inst.refs = emptyObject;115 inst.updater = updateQueue;116 this._instance = inst;117 ReactInstanceMap.set(inst, this);118 if (__DEV__) {119 warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component');120 warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component');121 warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component');122 warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component');123 warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component');124 warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component');125 warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component');126 }127 var initialState = inst.state;128 if (initialState === undefined) {129 inst.state = initialState = null;130 }131 invariant(typeof initialState === 'object' && !Array.isArray(initialState), '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent');132 this._pendingStateQueue = null;133 this._pendingReplaceState = false;134 this._pendingForceUpdate = false;135 var markup;136 if (inst.unstable_handleError) {137 markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);138 } else {139 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);140 }141 if (inst.componentDidMount) {142 if (__DEV__) {143 transaction.getReactMountReady().enqueue(function () {144 measureLifeCyclePerf(function () {145 return inst.componentDidMount();146 }, _this._debugID, 'componentDidMount');147 });148 } else {149 transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);150 }151 }152 return markup;153 },154 _constructComponent: function _constructComponent(doConstruct, publicProps, publicContext, updateQueue) {155 if (__DEV__) {156 ReactCurrentOwner.current = this;157 try {158 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);159 } finally {160 ReactCurrentOwner.current = null;161 }162 } else {163 return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);164 }165 },166 _constructComponentWithoutOwner: function _constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue) {167 var Component = this._currentElement.type;168 if (doConstruct) {169 if (__DEV__) {170 return measureLifeCyclePerf(function () {171 return new Component(publicProps, publicContext, updateQueue);172 }, this._debugID, 'ctor');173 } else {174 return new Component(publicProps, publicContext, updateQueue);175 }176 }177 if (__DEV__) {178 return measureLifeCyclePerf(function () {179 return Component(publicProps, publicContext, updateQueue);180 }, this._debugID, 'render');181 } else {182 return Component(publicProps, publicContext, updateQueue);183 }184 },185 performInitialMountWithErrorHandling: function performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context) {186 var markup;187 var checkpoint = transaction.checkpoint();188 try {189 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);190 } catch (e) {191 transaction.rollback(checkpoint);192 this._instance.unstable_handleError(e);193 if (this._pendingStateQueue) {194 this._instance.state = this._processPendingState(this._instance.props, this._instance.context);195 }196 checkpoint = transaction.checkpoint();197 this._renderedComponent.unmountComponent(true);198 transaction.rollback(checkpoint);199 markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);200 }201 return markup;202 },203 performInitialMount: function performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context) {204 var inst = this._instance;205 var debugID = 0;206 if (__DEV__) {207 debugID = this._debugID;208 }209 if (inst.componentWillMount) {210 if (__DEV__) {211 measureLifeCyclePerf(function () {212 return inst.componentWillMount();213 }, debugID, 'componentWillMount');214 } else {215 inst.componentWillMount();216 }217 if (this._pendingStateQueue) {218 inst.state = this._processPendingState(inst.props, inst.context);219 }220 }221 if (renderedElement === undefined) {222 renderedElement = this._renderValidatedComponent();223 }224 var nodeType = ReactNodeTypes.getType(renderedElement);225 this._renderedNodeType = nodeType;226 var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY);227 this._renderedComponent = child;228 var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);229 if (__DEV__) {230 if (debugID !== 0) {231 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];232 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);233 }234 }235 return markup;236 },237 getHostNode: function getHostNode() {238 return ReactReconciler.getHostNode(this._renderedComponent);239 },240 unmountComponent: function unmountComponent(safely) {241 if (!this._renderedComponent) {242 return;243 }244 var inst = this._instance;245 if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {246 inst._calledComponentWillUnmount = true;247 if (safely) {248 var name = this.getName() + '.componentWillUnmount()';249 ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst));250 } else {251 if (__DEV__) {252 measureLifeCyclePerf(function () {253 return inst.componentWillUnmount();254 }, this._debugID, 'componentWillUnmount');255 } else {256 inst.componentWillUnmount();257 }258 }259 }260 if (this._renderedComponent) {261 ReactReconciler.unmountComponent(this._renderedComponent, safely);262 this._renderedNodeType = null;263 this._renderedComponent = null;264 this._instance = null;265 }266 this._pendingStateQueue = null;267 this._pendingReplaceState = false;268 this._pendingForceUpdate = false;269 this._pendingCallbacks = null;270 this._pendingElement = null;271 this._context = null;272 this._rootNodeID = 0;273 this._topLevelWrapper = null;274 ReactInstanceMap.remove(inst);275 },276 _maskContext: function _maskContext(context) {277 var Component = this._currentElement.type;278 var contextTypes = Component.contextTypes;279 if (!contextTypes) {280 return emptyObject;281 }282 var maskedContext = {};283 for (var contextName in contextTypes) {284 maskedContext[contextName] = context[contextName];285 }286 return maskedContext;287 },288 _processContext: function _processContext(context) {289 var maskedContext = this._maskContext(context);290 if (__DEV__) {291 var Component = this._currentElement.type;292 if (Component.contextTypes) {293 this._checkContextTypes(Component.contextTypes, maskedContext, 'context');294 }295 }296 return maskedContext;297 },298 _processChildContext: function _processChildContext(currentContext) {299 var Component = this._currentElement.type;300 var inst = this._instance;301 var childContext;302 if (inst.getChildContext) {303 if (__DEV__) {304 ReactInstrumentation.debugTool.onBeginProcessingChildContext();305 try {306 childContext = inst.getChildContext();307 } finally {308 ReactInstrumentation.debugTool.onEndProcessingChildContext();309 }310 } else {311 childContext = inst.getChildContext();312 }313 }314 if (childContext) {315 invariant(typeof Component.childContextTypes === 'object', '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', this.getName() || 'ReactCompositeComponent');316 if (__DEV__) {317 this._checkContextTypes(Component.childContextTypes, childContext, 'childContext');318 }319 for (var name in childContext) {320 invariant(name in Component.childContextTypes, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name);321 }322 return babelHelpers.extends({}, currentContext, childContext);323 }324 return currentContext;325 },326 _checkContextTypes: function _checkContextTypes(typeSpecs, values, location) {327 if (__DEV__) {328 checkReactTypeSpec(typeSpecs, values, location, this.getName(), null, this._debugID);329 }330 },331 receiveComponent: function receiveComponent(nextElement, transaction, nextContext) {332 var prevElement = this._currentElement;333 var prevContext = this._context;334 this._pendingElement = null;335 this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext);336 },337 performUpdateIfNecessary: function performUpdateIfNecessary(transaction) {338 if (this._pendingElement != null) {339 ReactReconciler.receiveComponent(this, this._pendingElement, transaction, this._context);340 } else if (this._pendingStateQueue !== null || this._pendingForceUpdate) {341 this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context);342 } else {343 this._updateBatchNumber = null;344 }345 },346 updateComponent: function updateComponent(transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {347 var inst = this._instance;348 invariant(inst != null, 'Attempted to update component `%s` that has already been unmounted ' + '(or failed to mount).', this.getName() || 'ReactCompositeComponent');349 var willReceive = false;350 var nextContext;351 if (this._context === nextUnmaskedContext) {352 nextContext = inst.context;353 } else {354 nextContext = this._processContext(nextUnmaskedContext);355 willReceive = true;356 }357 var prevProps = prevParentElement.props;358 var nextProps = nextParentElement.props;359 if (prevParentElement !== nextParentElement) {360 willReceive = true;361 }362 if (willReceive && inst.componentWillReceiveProps) {363 if (__DEV__) {364 measureLifeCyclePerf(function () {365 return inst.componentWillReceiveProps(nextProps, nextContext);366 }, this._debugID, 'componentWillReceiveProps');367 } else {368 inst.componentWillReceiveProps(nextProps, nextContext);369 }370 }371 var nextState = this._processPendingState(nextProps, nextContext);372 var shouldUpdate = true;373 if (!this._pendingForceUpdate) {374 if (inst.shouldComponentUpdate) {375 if (__DEV__) {376 shouldUpdate = measureLifeCyclePerf(function () {377 return inst.shouldComponentUpdate(nextProps, nextState, nextContext);378 }, this._debugID, 'shouldComponentUpdate');379 } else {380 shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);381 }382 } else {383 if (this._compositeType === CompositeTypes.PureClass) {384 shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);385 }386 }387 }388 if (__DEV__) {389 warning(shouldUpdate !== undefined, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent');390 }391 this._updateBatchNumber = null;392 if (shouldUpdate) {393 this._pendingForceUpdate = false;394 this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);395 } else {396 this._currentElement = nextParentElement;397 this._context = nextUnmaskedContext;398 inst.props = nextProps;399 inst.state = nextState;400 inst.context = nextContext;401 }402 },403 _processPendingState: function _processPendingState(props, context) {404 var inst = this._instance;405 var queue = this._pendingStateQueue;406 var replace = this._pendingReplaceState;407 this._pendingReplaceState = false;408 this._pendingStateQueue = null;409 if (!queue) {410 return inst.state;411 }412 if (replace && queue.length === 1) {413 return queue[0];414 }415 var nextState = babelHelpers.extends({}, replace ? queue[0] : inst.state);416 for (var i = replace ? 1 : 0; i < queue.length; i++) {417 var partial = queue[i];418 babelHelpers.extends(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);419 }420 return nextState;421 },422 _performComponentUpdate: function _performComponentUpdate(nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) {423 var _this2 = this;424 var inst = this._instance;425 var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);426 var prevProps;427 var prevState;428 var prevContext;429 if (hasComponentDidUpdate) {430 prevProps = inst.props;431 prevState = inst.state;432 prevContext = inst.context;433 }434 if (inst.componentWillUpdate) {435 if (__DEV__) {436 measureLifeCyclePerf(function () {437 return inst.componentWillUpdate(nextProps, nextState, nextContext);438 }, this._debugID, 'componentWillUpdate');439 } else {440 inst.componentWillUpdate(nextProps, nextState, nextContext);441 }442 }443 this._currentElement = nextElement;444 this._context = unmaskedContext;445 inst.props = nextProps;446 inst.state = nextState;447 inst.context = nextContext;448 this._updateRenderedComponent(transaction, unmaskedContext);449 if (hasComponentDidUpdate) {450 if (__DEV__) {451 transaction.getReactMountReady().enqueue(function () {452 measureLifeCyclePerf(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), _this2._debugID, 'componentDidUpdate');453 });454 } else {455 transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst);456 }457 }458 },459 _updateRenderedComponent: function _updateRenderedComponent(transaction, context) {460 var prevComponentInstance = this._renderedComponent;461 var prevRenderedElement = prevComponentInstance._currentElement;462 var nextRenderedElement = this._renderValidatedComponent();463 var debugID = 0;464 if (__DEV__) {465 debugID = this._debugID;466 }467 if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {468 ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context));469 } else {470 var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);471 ReactReconciler.unmountComponent(prevComponentInstance, false);472 var nodeType = ReactNodeTypes.getType(nextRenderedElement);473 this._renderedNodeType = nodeType;474 var child = this._instantiateReactComponent(nextRenderedElement, nodeType !== ReactNodeTypes.EMPTY);475 this._renderedComponent = child;476 var nextMarkup = ReactReconciler.mountComponent(child, transaction, this._hostParent, this._hostContainerInfo, this._processChildContext(context), debugID);477 if (__DEV__) {478 if (debugID !== 0) {479 var childDebugIDs = child._debugID !== 0 ? [child._debugID] : [];480 ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs);481 }482 }483 this._replaceNodeWithMarkup(oldHostNode, nextMarkup, prevComponentInstance);484 }485 },486 _replaceNodeWithMarkup: function _replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance) {487 ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance);488 },489 _renderValidatedComponentWithoutOwnerOrContext: function _renderValidatedComponentWithoutOwnerOrContext() {490 var inst = this._instance;491 var renderedElement;492 if (__DEV__) {493 renderedElement = measureLifeCyclePerf(function () {494 return inst.render();495 }, this._debugID, 'render');496 } else {497 renderedElement = inst.render();498 }499 if (__DEV__) {500 if (renderedElement === undefined && inst.render._isMockFunction) {501 renderedElement = null;502 }503 }504 return renderedElement;505 },506 _renderValidatedComponent: function _renderValidatedComponent() {507 var renderedElement;...

Full Screen

Full Screen

ea7eecReactCompositeComponent.js

Source:ea7eecReactCompositeComponent.js Github

copy

Full Screen

...45}46function isPureComponent(Component){47return!!(Component.prototype&&Component.prototype.isPureReactComponent);48}49function measureLifeCyclePerf(fn,debugID,timerType){50if(debugID===0){51return fn();52}53ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID,timerType);54try{55return fn();56}finally{57ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID,timerType);58}59}60var nextMountID=1;61var ReactCompositeComponent={62construct:function construct(element){63this._currentElement=element;64this._rootNodeID=0;65this._compositeType=null;66this._instance=null;67this._hostParent=null;68this._hostContainerInfo=null;69this._updateBatchNumber=null;70this._pendingElement=null;71this._pendingStateQueue=null;72this._pendingReplaceState=false;73this._pendingForceUpdate=false;74this._renderedNodeType=null;75this._renderedComponent=null;76this._context=null;77this._mountOrder=0;78this._topLevelWrapper=null;79this._pendingCallbacks=null;80this._calledComponentWillUnmount=false;81if(__DEV__){82this._warnedAboutRefsInRender=false;83}84},85mountComponent:function mountComponent(86transaction,87hostParent,88hostContainerInfo,89context)90{var _this=this;91this._context=context;92this._mountOrder=nextMountID++;93this._hostParent=hostParent;94this._hostContainerInfo=hostContainerInfo;95var publicProps=this._currentElement.props;96var publicContext=this._processContext(context);97var Component=this._currentElement.type;98var updateQueue=transaction.getUpdateQueue();99var doConstruct=shouldConstruct(Component);100var inst=this._constructComponent(101doConstruct,102publicProps,103publicContext,104updateQueue);105var renderedElement;106if(!doConstruct&&(inst==null||inst.render==null)){107renderedElement=inst;108warnIfInvalidElement(Component,renderedElement);109invariant(110inst===null||111inst===false||112React.isValidElement(inst),113'%s(...): A valid React element (or null) must be returned. You may have '+114'returned undefined, an array or some other invalid object.',115Component.displayName||Component.name||'Component');116inst=new StatelessComponent(Component);117this._compositeType=CompositeTypes.StatelessFunctional;118}else{119if(isPureComponent(Component)){120this._compositeType=CompositeTypes.PureClass;121}else{122this._compositeType=CompositeTypes.ImpureClass;123}124}125if(__DEV__){126if(inst.render==null){127warning(128false,129'%s(...): No `render` method found on the returned component '+130'instance: you may have forgotten to define `render`.',131Component.displayName||Component.name||'Component');132}133var propsMutated=inst.props!==publicProps;134var componentName=135Component.displayName||Component.name||'Component';136warning(137inst.props===undefined||!propsMutated,138'%s(...): When calling super() in `%s`, make sure to pass '+139'up the same props that your component\'s constructor was passed.',140componentName,componentName);141}142inst.props=publicProps;143inst.context=publicContext;144inst.refs=emptyObject;145inst.updater=updateQueue;146this._instance=inst;147ReactInstanceMap.set(inst,this);148if(__DEV__){149warning(150!inst.getInitialState||151inst.getInitialState.isReactClassApproved,152'getInitialState was defined on %s, a plain JavaScript class. '+153'This is only supported for classes created using React.createClass. '+154'Did you mean to define a state property instead?',155this.getName()||'a component');156warning(157!inst.getDefaultProps||158inst.getDefaultProps.isReactClassApproved,159'getDefaultProps was defined on %s, a plain JavaScript class. '+160'This is only supported for classes created using React.createClass. '+161'Use a static property to define defaultProps instead.',162this.getName()||'a component');163warning(164!inst.propTypes,165'propTypes was defined as an instance property on %s. Use a static '+166'property to define propTypes instead.',167this.getName()||'a component');168warning(169!inst.contextTypes,170'contextTypes was defined as an instance property on %s. Use a '+171'static property to define contextTypes instead.',172this.getName()||'a component');173warning(174typeof inst.componentShouldUpdate!=='function',175'%s has a method called '+176'componentShouldUpdate(). Did you mean shouldComponentUpdate()? '+177'The name is phrased as a question because the function is '+178'expected to return a value.',179this.getName()||'A component');180warning(181typeof inst.componentDidUnmount!=='function',182'%s has a method called '+183'componentDidUnmount(). But there is no such lifecycle method. '+184'Did you mean componentWillUnmount()?',185this.getName()||'A component');186warning(187typeof inst.componentWillRecieveProps!=='function',188'%s has a method called '+189'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',190this.getName()||'A component');191}192var initialState=inst.state;193if(initialState===undefined){194inst.state=initialState=null;195}196invariant(197typeof initialState==='object'&&!Array.isArray(initialState),198'%s.state: must be set to an object or null',199this.getName()||'ReactCompositeComponent');200this._pendingStateQueue=null;201this._pendingReplaceState=false;202this._pendingForceUpdate=false;203var markup;204if(inst.unstable_handleError){205markup=this.performInitialMountWithErrorHandling(206renderedElement,207hostParent,208hostContainerInfo,209transaction,210context);211}else{212markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);213}214if(inst.componentDidMount){215if(__DEV__){216transaction.getReactMountReady().enqueue(function(){217measureLifeCyclePerf(218function(){return inst.componentDidMount();},219_this._debugID,220'componentDidMount');221});222}else{223transaction.getReactMountReady().enqueue(inst.componentDidMount,inst);224}225}226return markup;227},228_constructComponent:function _constructComponent(229doConstruct,230publicProps,231publicContext,232updateQueue)233{234if(__DEV__){235ReactCurrentOwner.current=this;236try{237return this._constructComponentWithoutOwner(238doConstruct,239publicProps,240publicContext,241updateQueue);242}finally{243ReactCurrentOwner.current=null;244}245}else{246return this._constructComponentWithoutOwner(247doConstruct,248publicProps,249publicContext,250updateQueue);251}252},253_constructComponentWithoutOwner:function _constructComponentWithoutOwner(254doConstruct,255publicProps,256publicContext,257updateQueue)258{259var Component=this._currentElement.type;260if(doConstruct){261if(__DEV__){262return measureLifeCyclePerf(263function(){return new Component(publicProps,publicContext,updateQueue);},264this._debugID,265'ctor');266}else{267return new Component(publicProps,publicContext,updateQueue);268}269}270if(__DEV__){271return measureLifeCyclePerf(272function(){return Component(publicProps,publicContext,updateQueue);},273this._debugID,274'render');275}else{276return Component(publicProps,publicContext,updateQueue);277}278},279performInitialMountWithErrorHandling:function performInitialMountWithErrorHandling(280renderedElement,281hostParent,282hostContainerInfo,283transaction,284context)285{286var markup;287var checkpoint=transaction.checkpoint();288try{289markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);290}catch(e){291transaction.rollback(checkpoint);292this._instance.unstable_handleError(e);293if(this._pendingStateQueue){294this._instance.state=this._processPendingState(this._instance.props,this._instance.context);295}296checkpoint=transaction.checkpoint();297this._renderedComponent.unmountComponent(true);298transaction.rollback(checkpoint);299markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);300}301return markup;302},303performInitialMount:function performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context){304var inst=this._instance;305var debugID=0;306if(__DEV__){307debugID=this._debugID;308}309if(inst.componentWillMount){310if(__DEV__){311measureLifeCyclePerf(312function(){return inst.componentWillMount();},313debugID,314'componentWillMount');315}else{316inst.componentWillMount();317}318if(this._pendingStateQueue){319inst.state=this._processPendingState(inst.props,inst.context);320}321}322if(renderedElement===undefined){323renderedElement=this._renderValidatedComponent();324}325var nodeType=ReactNodeTypes.getType(renderedElement);326this._renderedNodeType=nodeType;327var child=this._instantiateReactComponent(328renderedElement,329nodeType!==ReactNodeTypes.EMPTY);330this._renderedComponent=child;331var markup=ReactReconciler.mountComponent(332child,333transaction,334hostParent,335hostContainerInfo,336this._processChildContext(context),337debugID);338if(__DEV__){339if(debugID!==0){340var childDebugIDs=child._debugID!==0?[child._debugID]:[];341ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);342}343}344return markup;345},346getHostNode:function getHostNode(){347return ReactReconciler.getHostNode(this._renderedComponent);348},349unmountComponent:function unmountComponent(safely){350if(!this._renderedComponent){351return;352}353var inst=this._instance;354if(inst.componentWillUnmount&&!inst._calledComponentWillUnmount){355inst._calledComponentWillUnmount=true;356if(safely){357var name=this.getName()+'.componentWillUnmount()';358ReactErrorUtils.invokeGuardedCallback(name,inst.componentWillUnmount.bind(inst));359}else{360if(__DEV__){361measureLifeCyclePerf(362function(){return inst.componentWillUnmount();},363this._debugID,364'componentWillUnmount');365}else{366inst.componentWillUnmount();367}368}369}370if(this._renderedComponent){371ReactReconciler.unmountComponent(this._renderedComponent,safely);372this._renderedNodeType=null;373this._renderedComponent=null;374this._instance=null;375}376this._pendingStateQueue=null;377this._pendingReplaceState=false;378this._pendingForceUpdate=false;379this._pendingCallbacks=null;380this._pendingElement=null;381this._context=null;382this._rootNodeID=0;383this._topLevelWrapper=null;384ReactInstanceMap.remove(inst);385},386_maskContext:function _maskContext(context){387var Component=this._currentElement.type;388var contextTypes=Component.contextTypes;389if(!contextTypes){390return emptyObject;391}392var maskedContext={};393for(var contextName in contextTypes){394maskedContext[contextName]=context[contextName];395}396return maskedContext;397},398_processContext:function _processContext(context){399var maskedContext=this._maskContext(context);400if(__DEV__){401var Component=this._currentElement.type;402if(Component.contextTypes){403this._checkContextTypes(404Component.contextTypes,405maskedContext,406'context');407}408}409return maskedContext;410},411_processChildContext:function _processChildContext(currentContext){412var Component=this._currentElement.type;413var inst=this._instance;414var childContext;415if(inst.getChildContext){416if(__DEV__){417ReactInstrumentation.debugTool.onBeginProcessingChildContext();418try{419childContext=inst.getChildContext();420}finally{421ReactInstrumentation.debugTool.onEndProcessingChildContext();422}423}else{424childContext=inst.getChildContext();425}426}427if(childContext){428invariant(429typeof Component.childContextTypes==='object',430'%s.getChildContext(): childContextTypes must be defined in order to '+431'use getChildContext().',432this.getName()||'ReactCompositeComponent');433if(__DEV__){434this._checkContextTypes(435Component.childContextTypes,436childContext,437'childContext');438}439for(var name in childContext){440invariant(441name in Component.childContextTypes,442'%s.getChildContext(): key "%s" is not defined in childContextTypes.',443this.getName()||'ReactCompositeComponent',444name);445}446return _extends({},currentContext,childContext);447}448return currentContext;449},450_checkContextTypes:function _checkContextTypes(451typeSpecs,452values,453location)454{455if(__DEV__){456checkReactTypeSpec(457typeSpecs,458values,459location,460this.getName(),461null,462this._debugID);463}464},465receiveComponent:function receiveComponent(nextElement,transaction,nextContext){466var prevElement=this._currentElement;467var prevContext=this._context;468this._pendingElement=null;469this.updateComponent(470transaction,471prevElement,472nextElement,473prevContext,474nextContext);475},476performUpdateIfNecessary:function performUpdateIfNecessary(transaction){477if(this._pendingElement!=null){478ReactReconciler.receiveComponent(479this,480this._pendingElement,481transaction,482this._context);483}else if(this._pendingStateQueue!==null||this._pendingForceUpdate){484this.updateComponent(485transaction,486this._currentElement,487this._currentElement,488this._context,489this._context);490}else{491this._updateBatchNumber=null;492}493},494updateComponent:function updateComponent(495transaction,496prevParentElement,497nextParentElement,498prevUnmaskedContext,499nextUnmaskedContext)500{501var inst=this._instance;502invariant(503inst!=null,504'Attempted to update component `%s` that has already been unmounted '+505'(or failed to mount).',506this.getName()||'ReactCompositeComponent');507var willReceive=false;508var nextContext;509if(this._context===nextUnmaskedContext){510nextContext=inst.context;511}else{512nextContext=this._processContext(nextUnmaskedContext);513willReceive=true;514}515var prevProps=prevParentElement.props;516var nextProps=nextParentElement.props;517if(prevParentElement!==nextParentElement){518willReceive=true;519}520if(willReceive&&inst.componentWillReceiveProps){521if(__DEV__){522measureLifeCyclePerf(523function(){return inst.componentWillReceiveProps(nextProps,nextContext);},524this._debugID,525'componentWillReceiveProps');526}else{527inst.componentWillReceiveProps(nextProps,nextContext);528}529}530var nextState=this._processPendingState(nextProps,nextContext);531var shouldUpdate=true;532if(!this._pendingForceUpdate){533if(inst.shouldComponentUpdate){534if(__DEV__){535shouldUpdate=measureLifeCyclePerf(536function(){return inst.shouldComponentUpdate(nextProps,nextState,nextContext);},537this._debugID,538'shouldComponentUpdate');539}else{540shouldUpdate=inst.shouldComponentUpdate(nextProps,nextState,nextContext);541}542}else{543if(this._compositeType===CompositeTypes.PureClass){544shouldUpdate=545!shallowEqual(prevProps,nextProps)||546!shallowEqual(inst.state,nextState);547}548}549}550if(__DEV__){551warning(552shouldUpdate!==undefined,553'%s.shouldComponentUpdate(): Returned undefined instead of a '+554'boolean value. Make sure to return true or false.',555this.getName()||'ReactCompositeComponent');556}557this._updateBatchNumber=null;558if(shouldUpdate){559this._pendingForceUpdate=false;560this._performComponentUpdate(561nextParentElement,562nextProps,563nextState,564nextContext,565transaction,566nextUnmaskedContext);567}else{568this._currentElement=nextParentElement;569this._context=nextUnmaskedContext;570inst.props=nextProps;571inst.state=nextState;572inst.context=nextContext;573}574},575_processPendingState:function _processPendingState(props,context){576var inst=this._instance;577var queue=this._pendingStateQueue;578var replace=this._pendingReplaceState;579this._pendingReplaceState=false;580this._pendingStateQueue=null;581if(!queue){582return inst.state;583}584if(replace&&queue.length===1){585return queue[0];586}587var nextState=_extends({},replace?queue[0]:inst.state);588for(var i=replace?1:0;i<queue.length;i++){589var partial=queue[i];590_extends(591nextState,592typeof partial==='function'?593partial.call(inst,nextState,props,context):594partial);595}596return nextState;597},598_performComponentUpdate:function _performComponentUpdate(599nextElement,600nextProps,601nextState,602nextContext,603transaction,604unmaskedContext)605{var _this2=this;606var inst=this._instance;607var hasComponentDidUpdate=Boolean(inst.componentDidUpdate);608var prevProps;609var prevState;610var prevContext;611if(hasComponentDidUpdate){612prevProps=inst.props;613prevState=inst.state;614prevContext=inst.context;615}616if(inst.componentWillUpdate){617if(__DEV__){618measureLifeCyclePerf(619function(){return inst.componentWillUpdate(nextProps,nextState,nextContext);},620this._debugID,621'componentWillUpdate');622}else{623inst.componentWillUpdate(nextProps,nextState,nextContext);624}625}626this._currentElement=nextElement;627this._context=unmaskedContext;628inst.props=nextProps;629inst.state=nextState;630inst.context=nextContext;631this._updateRenderedComponent(transaction,unmaskedContext);632if(hasComponentDidUpdate){633if(__DEV__){634transaction.getReactMountReady().enqueue(function(){635measureLifeCyclePerf(636inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),637_this2._debugID,638'componentDidUpdate');639});640}else{641transaction.getReactMountReady().enqueue(642inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),643inst);644}645}646},647_updateRenderedComponent:function _updateRenderedComponent(transaction,context){648var prevComponentInstance=this._renderedComponent;649var prevRenderedElement=prevComponentInstance._currentElement;650var nextRenderedElement=this._renderValidatedComponent();651var debugID=0;652if(__DEV__){653debugID=this._debugID;654}655if(shouldUpdateReactComponent(prevRenderedElement,nextRenderedElement)){656ReactReconciler.receiveComponent(657prevComponentInstance,658nextRenderedElement,659transaction,660this._processChildContext(context));661}else{662var oldHostNode=ReactReconciler.getHostNode(prevComponentInstance);663ReactReconciler.unmountComponent(prevComponentInstance,false);664var nodeType=ReactNodeTypes.getType(nextRenderedElement);665this._renderedNodeType=nodeType;666var child=this._instantiateReactComponent(667nextRenderedElement,668nodeType!==ReactNodeTypes.EMPTY);669this._renderedComponent=child;670var nextMarkup=ReactReconciler.mountComponent(671child,672transaction,673this._hostParent,674this._hostContainerInfo,675this._processChildContext(context),676debugID);677if(__DEV__){678if(debugID!==0){679var childDebugIDs=child._debugID!==0?[child._debugID]:[];680ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);681}682}683this._replaceNodeWithMarkup(684oldHostNode,685nextMarkup,686prevComponentInstance);687}688},689_replaceNodeWithMarkup:function _replaceNodeWithMarkup(oldHostNode,nextMarkup,prevInstance){690ReactComponentEnvironment.replaceNodeWithMarkup(691oldHostNode,692nextMarkup,693prevInstance);694},695_renderValidatedComponentWithoutOwnerOrContext:function _renderValidatedComponentWithoutOwnerOrContext(){696var inst=this._instance;697var renderedElement;698if(__DEV__){699renderedElement=measureLifeCyclePerf(700function(){return inst.render();},701this._debugID,702'render');703}else{704renderedElement=inst.render();705}706if(__DEV__){707if(renderedElement===undefined&&708inst.render._isMockFunction){709renderedElement=null;710}711}712return renderedElement;713},...

Full Screen

Full Screen

60dc34ReactCompositeComponent.js

Source:60dc34ReactCompositeComponent.js Github

copy

Full Screen

...45}46function isPureComponent(Component){47return!!(Component.prototype&&Component.prototype.isPureReactComponent);48}49function measureLifeCyclePerf(fn,debugID,timerType){50if(debugID===0){51return fn();52}53ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID,timerType);54try{55return fn();56}finally{57ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID,timerType);58}59}60var nextMountID=1;61var ReactCompositeComponent={62construct:function construct(element){63this._currentElement=element;64this._rootNodeID=0;65this._compositeType=null;66this._instance=null;67this._hostParent=null;68this._hostContainerInfo=null;69this._updateBatchNumber=null;70this._pendingElement=null;71this._pendingStateQueue=null;72this._pendingReplaceState=false;73this._pendingForceUpdate=false;74this._renderedNodeType=null;75this._renderedComponent=null;76this._context=null;77this._mountOrder=0;78this._topLevelWrapper=null;79this._pendingCallbacks=null;80this._calledComponentWillUnmount=false;81if(__DEV__){82this._warnedAboutRefsInRender=false;83}84},85mountComponent:function mountComponent(86transaction,87hostParent,88hostContainerInfo,89context)90{var _this=this;91this._context=context;92this._mountOrder=nextMountID++;93this._hostParent=hostParent;94this._hostContainerInfo=hostContainerInfo;95var publicProps=this._currentElement.props;96var publicContext=this._processContext(context);97var Component=this._currentElement.type;98var updateQueue=transaction.getUpdateQueue();99var doConstruct=shouldConstruct(Component);100var inst=this._constructComponent(101doConstruct,102publicProps,103publicContext,104updateQueue);105var renderedElement;106if(!doConstruct&&(inst==null||inst.render==null)){107renderedElement=inst;108warnIfInvalidElement(Component,renderedElement);109invariant(110inst===null||111inst===false||112React.isValidElement(inst),113'%s(...): A valid React element (or null) must be returned. You may have '+114'returned undefined, an array or some other invalid object.',115Component.displayName||Component.name||'Component');116inst=new StatelessComponent(Component);117this._compositeType=CompositeTypes.StatelessFunctional;118}else{119if(isPureComponent(Component)){120this._compositeType=CompositeTypes.PureClass;121}else{122this._compositeType=CompositeTypes.ImpureClass;123}124}125if(__DEV__){126if(inst.render==null){127warning(128false,129'%s(...): No `render` method found on the returned component '+130'instance: you may have forgotten to define `render`.',131Component.displayName||Component.name||'Component');132}133var propsMutated=inst.props!==publicProps;134var componentName=135Component.displayName||Component.name||'Component';136warning(137inst.props===undefined||!propsMutated,138'%s(...): When calling super() in `%s`, make sure to pass '+139'up the same props that your component\'s constructor was passed.',140componentName,componentName);141}142inst.props=publicProps;143inst.context=publicContext;144inst.refs=emptyObject;145inst.updater=updateQueue;146this._instance=inst;147ReactInstanceMap.set(inst,this);148if(__DEV__){149warning(150!inst.getInitialState||151inst.getInitialState.isReactClassApproved,152'getInitialState was defined on %s, a plain JavaScript class. '+153'This is only supported for classes created using React.createClass. '+154'Did you mean to define a state property instead?',155this.getName()||'a component');156warning(157!inst.getDefaultProps||158inst.getDefaultProps.isReactClassApproved,159'getDefaultProps was defined on %s, a plain JavaScript class. '+160'This is only supported for classes created using React.createClass. '+161'Use a static property to define defaultProps instead.',162this.getName()||'a component');163warning(164!inst.propTypes,165'propTypes was defined as an instance property on %s. Use a static '+166'property to define propTypes instead.',167this.getName()||'a component');168warning(169!inst.contextTypes,170'contextTypes was defined as an instance property on %s. Use a '+171'static property to define contextTypes instead.',172this.getName()||'a component');173warning(174typeof inst.componentShouldUpdate!=='function',175'%s has a method called '+176'componentShouldUpdate(). Did you mean shouldComponentUpdate()? '+177'The name is phrased as a question because the function is '+178'expected to return a value.',179this.getName()||'A component');180warning(181typeof inst.componentDidUnmount!=='function',182'%s has a method called '+183'componentDidUnmount(). But there is no such lifecycle method. '+184'Did you mean componentWillUnmount()?',185this.getName()||'A component');186warning(187typeof inst.componentWillRecieveProps!=='function',188'%s has a method called '+189'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',190this.getName()||'A component');191}192var initialState=inst.state;193if(initialState===undefined){194inst.state=initialState=null;195}196invariant(197typeof initialState==='object'&&!Array.isArray(initialState),198'%s.state: must be set to an object or null',199this.getName()||'ReactCompositeComponent');200this._pendingStateQueue=null;201this._pendingReplaceState=false;202this._pendingForceUpdate=false;203var markup;204if(inst.unstable_handleError){205markup=this.performInitialMountWithErrorHandling(206renderedElement,207hostParent,208hostContainerInfo,209transaction,210context);211}else{212markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);213}214if(inst.componentDidMount){215if(__DEV__){216transaction.getReactMountReady().enqueue(function(){217measureLifeCyclePerf(218function(){return inst.componentDidMount();},219_this._debugID,220'componentDidMount');221});222}else{223transaction.getReactMountReady().enqueue(inst.componentDidMount,inst);224}225}226return markup;227},228_constructComponent:function _constructComponent(229doConstruct,230publicProps,231publicContext,232updateQueue)233{234if(__DEV__){235ReactCurrentOwner.current=this;236try{237return this._constructComponentWithoutOwner(238doConstruct,239publicProps,240publicContext,241updateQueue);242}finally{243ReactCurrentOwner.current=null;244}245}else{246return this._constructComponentWithoutOwner(247doConstruct,248publicProps,249publicContext,250updateQueue);251}252},253_constructComponentWithoutOwner:function _constructComponentWithoutOwner(254doConstruct,255publicProps,256publicContext,257updateQueue)258{259var Component=this._currentElement.type;260if(doConstruct){261if(__DEV__){262return measureLifeCyclePerf(263function(){return new Component(publicProps,publicContext,updateQueue);},264this._debugID,265'ctor');266}else{267return new Component(publicProps,publicContext,updateQueue);268}269}270if(__DEV__){271return measureLifeCyclePerf(272function(){return Component(publicProps,publicContext,updateQueue);},273this._debugID,274'render');275}else{276return Component(publicProps,publicContext,updateQueue);277}278},279performInitialMountWithErrorHandling:function performInitialMountWithErrorHandling(280renderedElement,281hostParent,282hostContainerInfo,283transaction,284context)285{286var markup;287var checkpoint=transaction.checkpoint();288try{289markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);290}catch(e){291transaction.rollback(checkpoint);292this._instance.unstable_handleError(e);293if(this._pendingStateQueue){294this._instance.state=this._processPendingState(this._instance.props,this._instance.context);295}296checkpoint=transaction.checkpoint();297this._renderedComponent.unmountComponent(true);298transaction.rollback(checkpoint);299markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);300}301return markup;302},303performInitialMount:function performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context){304var inst=this._instance;305var debugID=0;306if(__DEV__){307debugID=this._debugID;308}309if(inst.componentWillMount){310if(__DEV__){311measureLifeCyclePerf(312function(){return inst.componentWillMount();},313debugID,314'componentWillMount');315}else{316inst.componentWillMount();317}318if(this._pendingStateQueue){319inst.state=this._processPendingState(inst.props,inst.context);320}321}322if(renderedElement===undefined){323renderedElement=this._renderValidatedComponent();324}325var nodeType=ReactNodeTypes.getType(renderedElement);326this._renderedNodeType=nodeType;327var child=this._instantiateReactComponent(328renderedElement,329nodeType!==ReactNodeTypes.EMPTY);330this._renderedComponent=child;331var markup=ReactReconciler.mountComponent(332child,333transaction,334hostParent,335hostContainerInfo,336this._processChildContext(context),337debugID);338if(__DEV__){339if(debugID!==0){340var childDebugIDs=child._debugID!==0?[child._debugID]:[];341ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);342}343}344return markup;345},346getHostNode:function getHostNode(){347return ReactReconciler.getHostNode(this._renderedComponent);348},349unmountComponent:function unmountComponent(safely){350if(!this._renderedComponent){351return;352}353var inst=this._instance;354if(inst.componentWillUnmount&&!inst._calledComponentWillUnmount){355inst._calledComponentWillUnmount=true;356if(safely){357var name=this.getName()+'.componentWillUnmount()';358ReactErrorUtils.invokeGuardedCallback(name,inst.componentWillUnmount.bind(inst));359}else{360if(__DEV__){361measureLifeCyclePerf(362function(){return inst.componentWillUnmount();},363this._debugID,364'componentWillUnmount');365}else{366inst.componentWillUnmount();367}368}369}370if(this._renderedComponent){371ReactReconciler.unmountComponent(this._renderedComponent,safely);372this._renderedNodeType=null;373this._renderedComponent=null;374this._instance=null;375}376this._pendingStateQueue=null;377this._pendingReplaceState=false;378this._pendingForceUpdate=false;379this._pendingCallbacks=null;380this._pendingElement=null;381this._context=null;382this._rootNodeID=0;383this._topLevelWrapper=null;384ReactInstanceMap.remove(inst);385},386_maskContext:function _maskContext(context){387var Component=this._currentElement.type;388var contextTypes=Component.contextTypes;389if(!contextTypes){390return emptyObject;391}392var maskedContext={};393for(var contextName in contextTypes){394maskedContext[contextName]=context[contextName];395}396return maskedContext;397},398_processContext:function _processContext(context){399var maskedContext=this._maskContext(context);400if(__DEV__){401var Component=this._currentElement.type;402if(Component.contextTypes){403this._checkContextTypes(404Component.contextTypes,405maskedContext,406'context');407}408}409return maskedContext;410},411_processChildContext:function _processChildContext(currentContext){412var Component=this._currentElement.type;413var inst=this._instance;414var childContext;415if(inst.getChildContext){416if(__DEV__){417ReactInstrumentation.debugTool.onBeginProcessingChildContext();418try{419childContext=inst.getChildContext();420}finally{421ReactInstrumentation.debugTool.onEndProcessingChildContext();422}423}else{424childContext=inst.getChildContext();425}426}427if(childContext){428invariant(429typeof Component.childContextTypes==='object',430'%s.getChildContext(): childContextTypes must be defined in order to '+431'use getChildContext().',432this.getName()||'ReactCompositeComponent');433if(__DEV__){434this._checkContextTypes(435Component.childContextTypes,436childContext,437'childContext');438}439for(var name in childContext){440invariant(441name in Component.childContextTypes,442'%s.getChildContext(): key "%s" is not defined in childContextTypes.',443this.getName()||'ReactCompositeComponent',444name);445}446return babelHelpers.extends({},currentContext,childContext);447}448return currentContext;449},450_checkContextTypes:function _checkContextTypes(451typeSpecs,452values,453location)454{455if(__DEV__){456checkReactTypeSpec(457typeSpecs,458values,459location,460this.getName(),461null,462this._debugID);463}464},465receiveComponent:function receiveComponent(nextElement,transaction,nextContext){466var prevElement=this._currentElement;467var prevContext=this._context;468this._pendingElement=null;469this.updateComponent(470transaction,471prevElement,472nextElement,473prevContext,474nextContext);475},476performUpdateIfNecessary:function performUpdateIfNecessary(transaction){477if(this._pendingElement!=null){478ReactReconciler.receiveComponent(479this,480this._pendingElement,481transaction,482this._context);483}else if(this._pendingStateQueue!==null||this._pendingForceUpdate){484this.updateComponent(485transaction,486this._currentElement,487this._currentElement,488this._context,489this._context);490}else{491this._updateBatchNumber=null;492}493},494updateComponent:function updateComponent(495transaction,496prevParentElement,497nextParentElement,498prevUnmaskedContext,499nextUnmaskedContext)500{501var inst=this._instance;502invariant(503inst!=null,504'Attempted to update component `%s` that has already been unmounted '+505'(or failed to mount).',506this.getName()||'ReactCompositeComponent');507var willReceive=false;508var nextContext;509if(this._context===nextUnmaskedContext){510nextContext=inst.context;511}else{512nextContext=this._processContext(nextUnmaskedContext);513willReceive=true;514}515var prevProps=prevParentElement.props;516var nextProps=nextParentElement.props;517if(prevParentElement!==nextParentElement){518willReceive=true;519}520if(willReceive&&inst.componentWillReceiveProps){521if(__DEV__){522measureLifeCyclePerf(523function(){return inst.componentWillReceiveProps(nextProps,nextContext);},524this._debugID,525'componentWillReceiveProps');526}else{527inst.componentWillReceiveProps(nextProps,nextContext);528}529}530var nextState=this._processPendingState(nextProps,nextContext);531var shouldUpdate=true;532if(!this._pendingForceUpdate){533if(inst.shouldComponentUpdate){534if(__DEV__){535shouldUpdate=measureLifeCyclePerf(536function(){return inst.shouldComponentUpdate(nextProps,nextState,nextContext);},537this._debugID,538'shouldComponentUpdate');539}else{540shouldUpdate=inst.shouldComponentUpdate(nextProps,nextState,nextContext);541}542}else{543if(this._compositeType===CompositeTypes.PureClass){544shouldUpdate=545!shallowEqual(prevProps,nextProps)||546!shallowEqual(inst.state,nextState);547}548}549}550if(__DEV__){551warning(552shouldUpdate!==undefined,553'%s.shouldComponentUpdate(): Returned undefined instead of a '+554'boolean value. Make sure to return true or false.',555this.getName()||'ReactCompositeComponent');556}557this._updateBatchNumber=null;558if(shouldUpdate){559this._pendingForceUpdate=false;560this._performComponentUpdate(561nextParentElement,562nextProps,563nextState,564nextContext,565transaction,566nextUnmaskedContext);567}else{568this._currentElement=nextParentElement;569this._context=nextUnmaskedContext;570inst.props=nextProps;571inst.state=nextState;572inst.context=nextContext;573}574},575_processPendingState:function _processPendingState(props,context){576var inst=this._instance;577var queue=this._pendingStateQueue;578var replace=this._pendingReplaceState;579this._pendingReplaceState=false;580this._pendingStateQueue=null;581if(!queue){582return inst.state;583}584if(replace&&queue.length===1){585return queue[0];586}587var nextState=babelHelpers.extends({},replace?queue[0]:inst.state);588for(var i=replace?1:0;i<queue.length;i++){589var partial=queue[i];590babelHelpers.extends(591nextState,592typeof partial==='function'?593partial.call(inst,nextState,props,context):594partial);595}596return nextState;597},598_performComponentUpdate:function _performComponentUpdate(599nextElement,600nextProps,601nextState,602nextContext,603transaction,604unmaskedContext)605{var _this2=this;606var inst=this._instance;607var hasComponentDidUpdate=Boolean(inst.componentDidUpdate);608var prevProps;609var prevState;610var prevContext;611if(hasComponentDidUpdate){612prevProps=inst.props;613prevState=inst.state;614prevContext=inst.context;615}616if(inst.componentWillUpdate){617if(__DEV__){618measureLifeCyclePerf(619function(){return inst.componentWillUpdate(nextProps,nextState,nextContext);},620this._debugID,621'componentWillUpdate');622}else{623inst.componentWillUpdate(nextProps,nextState,nextContext);624}625}626this._currentElement=nextElement;627this._context=unmaskedContext;628inst.props=nextProps;629inst.state=nextState;630inst.context=nextContext;631this._updateRenderedComponent(transaction,unmaskedContext);632if(hasComponentDidUpdate){633if(__DEV__){634transaction.getReactMountReady().enqueue(function(){635measureLifeCyclePerf(636inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),637_this2._debugID,638'componentDidUpdate');639});640}else{641transaction.getReactMountReady().enqueue(642inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),643inst);644}645}646},647_updateRenderedComponent:function _updateRenderedComponent(transaction,context){648var prevComponentInstance=this._renderedComponent;649var prevRenderedElement=prevComponentInstance._currentElement;650var nextRenderedElement=this._renderValidatedComponent();651var debugID=0;652if(__DEV__){653debugID=this._debugID;654}655if(shouldUpdateReactComponent(prevRenderedElement,nextRenderedElement)){656ReactReconciler.receiveComponent(657prevComponentInstance,658nextRenderedElement,659transaction,660this._processChildContext(context));661}else{662var oldHostNode=ReactReconciler.getHostNode(prevComponentInstance);663ReactReconciler.unmountComponent(prevComponentInstance,false);664var nodeType=ReactNodeTypes.getType(nextRenderedElement);665this._renderedNodeType=nodeType;666var child=this._instantiateReactComponent(667nextRenderedElement,668nodeType!==ReactNodeTypes.EMPTY);669this._renderedComponent=child;670var nextMarkup=ReactReconciler.mountComponent(671child,672transaction,673this._hostParent,674this._hostContainerInfo,675this._processChildContext(context),676debugID);677if(__DEV__){678if(debugID!==0){679var childDebugIDs=child._debugID!==0?[child._debugID]:[];680ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);681}682}683this._replaceNodeWithMarkup(684oldHostNode,685nextMarkup,686prevComponentInstance);687}688},689_replaceNodeWithMarkup:function _replaceNodeWithMarkup(oldHostNode,nextMarkup,prevInstance){690ReactComponentEnvironment.replaceNodeWithMarkup(691oldHostNode,692nextMarkup,693prevInstance);694},695_renderValidatedComponentWithoutOwnerOrContext:function _renderValidatedComponentWithoutOwnerOrContext(){696var inst=this._instance;697var renderedElement;698if(__DEV__){699renderedElement=measureLifeCyclePerf(700function(){return inst.render();},701this._debugID,702'render');703}else{704renderedElement=inst.render();705}706if(__DEV__){707if(renderedElement===undefined&&708inst.render._isMockFunction){709renderedElement=null;710}711}712return renderedElement;713},...

Full Screen

Full Screen

cc0b4eReactCompositeComponent.js

Source:cc0b4eReactCompositeComponent.js Github

copy

Full Screen

...45}46function isPureComponent(Component){47return!!(Component.prototype&&Component.prototype.isPureReactComponent);48}49function measureLifeCyclePerf(fn,debugID,timerType){50if(debugID===0){51return fn();52}53ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID,timerType);54try{55return fn();56}finally{57ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID,timerType);58}59}60var nextMountID=1;61var ReactCompositeComponent={62construct:function construct(element){63this._currentElement=element;64this._rootNodeID=0;65this._compositeType=null;66this._instance=null;67this._hostParent=null;68this._hostContainerInfo=null;69this._updateBatchNumber=null;70this._pendingElement=null;71this._pendingStateQueue=null;72this._pendingReplaceState=false;73this._pendingForceUpdate=false;74this._renderedNodeType=null;75this._renderedComponent=null;76this._context=null;77this._mountOrder=0;78this._topLevelWrapper=null;79this._pendingCallbacks=null;80this._calledComponentWillUnmount=false;81if(__DEV__){82this._warnedAboutRefsInRender=false;83}84},85mountComponent:function mountComponent(86transaction,87hostParent,88hostContainerInfo,89context)90{var _this=this;91this._context=context;92this._mountOrder=nextMountID++;93this._hostParent=hostParent;94this._hostContainerInfo=hostContainerInfo;95var publicProps=this._currentElement.props;96var publicContext=this._processContext(context);97var Component=this._currentElement.type;98var updateQueue=transaction.getUpdateQueue();99var doConstruct=shouldConstruct(Component);100var inst=this._constructComponent(101doConstruct,102publicProps,103publicContext,104updateQueue);105var renderedElement;106if(!doConstruct&&(inst==null||inst.render==null)){107renderedElement=inst;108warnIfInvalidElement(Component,renderedElement);109invariant(110inst===null||111inst===false||112React.isValidElement(inst),113'%s(...): A valid React element (or null) must be returned. You may have '+114'returned undefined, an array or some other invalid object.',115Component.displayName||Component.name||'Component');116inst=new StatelessComponent(Component);117this._compositeType=CompositeTypes.StatelessFunctional;118}else{119if(isPureComponent(Component)){120this._compositeType=CompositeTypes.PureClass;121}else{122this._compositeType=CompositeTypes.ImpureClass;123}124}125if(__DEV__){126if(inst.render==null){127warning(128false,129'%s(...): No `render` method found on the returned component '+130'instance: you may have forgotten to define `render`.',131Component.displayName||Component.name||'Component');132}133var propsMutated=inst.props!==publicProps;134var componentName=135Component.displayName||Component.name||'Component';136warning(137inst.props===undefined||!propsMutated,138'%s(...): When calling super() in `%s`, make sure to pass '+139'up the same props that your component\'s constructor was passed.',140componentName,componentName);141}142inst.props=publicProps;143inst.context=publicContext;144inst.refs=emptyObject;145inst.updater=updateQueue;146this._instance=inst;147ReactInstanceMap.set(inst,this);148if(__DEV__){149warning(150!inst.getInitialState||151inst.getInitialState.isReactClassApproved,152'getInitialState was defined on %s, a plain JavaScript class. '+153'This is only supported for classes created using React.createClass. '+154'Did you mean to define a state property instead?',155this.getName()||'a component');156warning(157!inst.getDefaultProps||158inst.getDefaultProps.isReactClassApproved,159'getDefaultProps was defined on %s, a plain JavaScript class. '+160'This is only supported for classes created using React.createClass. '+161'Use a static property to define defaultProps instead.',162this.getName()||'a component');163warning(164!inst.propTypes,165'propTypes was defined as an instance property on %s. Use a static '+166'property to define propTypes instead.',167this.getName()||'a component');168warning(169!inst.contextTypes,170'contextTypes was defined as an instance property on %s. Use a '+171'static property to define contextTypes instead.',172this.getName()||'a component');173warning(174typeof inst.componentShouldUpdate!=='function',175'%s has a method called '+176'componentShouldUpdate(). Did you mean shouldComponentUpdate()? '+177'The name is phrased as a question because the function is '+178'expected to return a value.',179this.getName()||'A component');180warning(181typeof inst.componentDidUnmount!=='function',182'%s has a method called '+183'componentDidUnmount(). But there is no such lifecycle method. '+184'Did you mean componentWillUnmount()?',185this.getName()||'A component');186warning(187typeof inst.componentWillRecieveProps!=='function',188'%s has a method called '+189'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',190this.getName()||'A component');191}192var initialState=inst.state;193if(initialState===undefined){194inst.state=initialState=null;195}196invariant(197typeof initialState==='object'&&!Array.isArray(initialState),198'%s.state: must be set to an object or null',199this.getName()||'ReactCompositeComponent');200this._pendingStateQueue=null;201this._pendingReplaceState=false;202this._pendingForceUpdate=false;203var markup;204if(inst.unstable_handleError){205markup=this.performInitialMountWithErrorHandling(206renderedElement,207hostParent,208hostContainerInfo,209transaction,210context);211}else{212markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);213}214if(inst.componentDidMount){215if(__DEV__){216transaction.getReactMountReady().enqueue(function(){217measureLifeCyclePerf(218function(){return inst.componentDidMount();},219_this._debugID,220'componentDidMount');221});222}else{223transaction.getReactMountReady().enqueue(inst.componentDidMount,inst);224}225}226return markup;227},228_constructComponent:function _constructComponent(229doConstruct,230publicProps,231publicContext,232updateQueue)233{234if(__DEV__){235ReactCurrentOwner.current=this;236try{237return this._constructComponentWithoutOwner(238doConstruct,239publicProps,240publicContext,241updateQueue);242}finally{243ReactCurrentOwner.current=null;244}245}else{246return this._constructComponentWithoutOwner(247doConstruct,248publicProps,249publicContext,250updateQueue);251}252},253_constructComponentWithoutOwner:function _constructComponentWithoutOwner(254doConstruct,255publicProps,256publicContext,257updateQueue)258{259var Component=this._currentElement.type;260if(doConstruct){261if(__DEV__){262return measureLifeCyclePerf(263function(){return new Component(publicProps,publicContext,updateQueue);},264this._debugID,265'ctor');266}else{267return new Component(publicProps,publicContext,updateQueue);268}269}270if(__DEV__){271return measureLifeCyclePerf(272function(){return Component(publicProps,publicContext,updateQueue);},273this._debugID,274'render');275}else{276return Component(publicProps,publicContext,updateQueue);277}278},279performInitialMountWithErrorHandling:function performInitialMountWithErrorHandling(280renderedElement,281hostParent,282hostContainerInfo,283transaction,284context)285{286var markup;287var checkpoint=transaction.checkpoint();288try{289markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);290}catch(e){291transaction.rollback(checkpoint);292this._instance.unstable_handleError(e);293if(this._pendingStateQueue){294this._instance.state=this._processPendingState(this._instance.props,this._instance.context);295}296checkpoint=transaction.checkpoint();297this._renderedComponent.unmountComponent(true);298transaction.rollback(checkpoint);299markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);300}301return markup;302},303performInitialMount:function performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context){304var inst=this._instance;305var debugID=0;306if(__DEV__){307debugID=this._debugID;308}309if(inst.componentWillMount){310if(__DEV__){311measureLifeCyclePerf(312function(){return inst.componentWillMount();},313debugID,314'componentWillMount');315}else{316inst.componentWillMount();317}318if(this._pendingStateQueue){319inst.state=this._processPendingState(inst.props,inst.context);320}321}322if(renderedElement===undefined){323renderedElement=this._renderValidatedComponent();324}325var nodeType=ReactNodeTypes.getType(renderedElement);326this._renderedNodeType=nodeType;327var child=this._instantiateReactComponent(328renderedElement,329nodeType!==ReactNodeTypes.EMPTY);330this._renderedComponent=child;331var markup=ReactReconciler.mountComponent(332child,333transaction,334hostParent,335hostContainerInfo,336this._processChildContext(context),337debugID);338if(__DEV__){339if(debugID!==0){340var childDebugIDs=child._debugID!==0?[child._debugID]:[];341ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);342}343}344return markup;345},346getHostNode:function getHostNode(){347return ReactReconciler.getHostNode(this._renderedComponent);348},349unmountComponent:function unmountComponent(safely){350if(!this._renderedComponent){351return;352}353var inst=this._instance;354if(inst.componentWillUnmount&&!inst._calledComponentWillUnmount){355inst._calledComponentWillUnmount=true;356if(safely){357var name=this.getName()+'.componentWillUnmount()';358ReactErrorUtils.invokeGuardedCallback(name,inst.componentWillUnmount.bind(inst));359}else{360if(__DEV__){361measureLifeCyclePerf(362function(){return inst.componentWillUnmount();},363this._debugID,364'componentWillUnmount');365}else{366inst.componentWillUnmount();367}368}369}370if(this._renderedComponent){371ReactReconciler.unmountComponent(this._renderedComponent,safely);372this._renderedNodeType=null;373this._renderedComponent=null;374this._instance=null;375}376this._pendingStateQueue=null;377this._pendingReplaceState=false;378this._pendingForceUpdate=false;379this._pendingCallbacks=null;380this._pendingElement=null;381this._context=null;382this._rootNodeID=0;383this._topLevelWrapper=null;384ReactInstanceMap.remove(inst);385},386_maskContext:function _maskContext(context){387var Component=this._currentElement.type;388var contextTypes=Component.contextTypes;389if(!contextTypes){390return emptyObject;391}392var maskedContext={};393for(var contextName in contextTypes){394maskedContext[contextName]=context[contextName];395}396return maskedContext;397},398_processContext:function _processContext(context){399var maskedContext=this._maskContext(context);400if(__DEV__){401var Component=this._currentElement.type;402if(Component.contextTypes){403this._checkContextTypes(404Component.contextTypes,405maskedContext,406'context');407}408}409return maskedContext;410},411_processChildContext:function _processChildContext(currentContext){412var Component=this._currentElement.type;413var inst=this._instance;414var childContext;415if(inst.getChildContext){416if(__DEV__){417ReactInstrumentation.debugTool.onBeginProcessingChildContext();418try{419childContext=inst.getChildContext();420}finally{421ReactInstrumentation.debugTool.onEndProcessingChildContext();422}423}else{424childContext=inst.getChildContext();425}426}427if(childContext){428invariant(429typeof Component.childContextTypes==='object',430'%s.getChildContext(): childContextTypes must be defined in order to '+431'use getChildContext().',432this.getName()||'ReactCompositeComponent');433if(__DEV__){434this._checkContextTypes(435Component.childContextTypes,436childContext,437'childContext');438}439for(var name in childContext){440invariant(441name in Component.childContextTypes,442'%s.getChildContext(): key "%s" is not defined in childContextTypes.',443this.getName()||'ReactCompositeComponent',444name);445}446return babelHelpers.extends({},currentContext,childContext);447}448return currentContext;449},450_checkContextTypes:function _checkContextTypes(451typeSpecs,452values,453location)454{455if(__DEV__){456checkReactTypeSpec(457typeSpecs,458values,459location,460this.getName(),461null,462this._debugID);463}464},465receiveComponent:function receiveComponent(nextElement,transaction,nextContext){466var prevElement=this._currentElement;467var prevContext=this._context;468this._pendingElement=null;469this.updateComponent(470transaction,471prevElement,472nextElement,473prevContext,474nextContext);475},476performUpdateIfNecessary:function performUpdateIfNecessary(transaction){477if(this._pendingElement!=null){478ReactReconciler.receiveComponent(479this,480this._pendingElement,481transaction,482this._context);483}else if(this._pendingStateQueue!==null||this._pendingForceUpdate){484this.updateComponent(485transaction,486this._currentElement,487this._currentElement,488this._context,489this._context);490}else{491this._updateBatchNumber=null;492}493},494updateComponent:function updateComponent(495transaction,496prevParentElement,497nextParentElement,498prevUnmaskedContext,499nextUnmaskedContext)500{501var inst=this._instance;502invariant(503inst!=null,504'Attempted to update component `%s` that has already been unmounted '+505'(or failed to mount).',506this.getName()||'ReactCompositeComponent');507var willReceive=false;508var nextContext;509if(this._context===nextUnmaskedContext){510nextContext=inst.context;511}else{512nextContext=this._processContext(nextUnmaskedContext);513willReceive=true;514}515var prevProps=prevParentElement.props;516var nextProps=nextParentElement.props;517if(prevParentElement!==nextParentElement){518willReceive=true;519}520if(willReceive&&inst.componentWillReceiveProps){521if(__DEV__){522measureLifeCyclePerf(523function(){return inst.componentWillReceiveProps(nextProps,nextContext);},524this._debugID,525'componentWillReceiveProps');526}else{527inst.componentWillReceiveProps(nextProps,nextContext);528}529}530var nextState=this._processPendingState(nextProps,nextContext);531var shouldUpdate=true;532if(!this._pendingForceUpdate){533if(inst.shouldComponentUpdate){534if(__DEV__){535shouldUpdate=measureLifeCyclePerf(536function(){return inst.shouldComponentUpdate(nextProps,nextState,nextContext);},537this._debugID,538'shouldComponentUpdate');539}else{540shouldUpdate=inst.shouldComponentUpdate(nextProps,nextState,nextContext);541}542}else{543if(this._compositeType===CompositeTypes.PureClass){544shouldUpdate=545!shallowEqual(prevProps,nextProps)||546!shallowEqual(inst.state,nextState);547}548}549}550if(__DEV__){551warning(552shouldUpdate!==undefined,553'%s.shouldComponentUpdate(): Returned undefined instead of a '+554'boolean value. Make sure to return true or false.',555this.getName()||'ReactCompositeComponent');556}557this._updateBatchNumber=null;558if(shouldUpdate){559this._pendingForceUpdate=false;560this._performComponentUpdate(561nextParentElement,562nextProps,563nextState,564nextContext,565transaction,566nextUnmaskedContext);567}else{568this._currentElement=nextParentElement;569this._context=nextUnmaskedContext;570inst.props=nextProps;571inst.state=nextState;572inst.context=nextContext;573}574},575_processPendingState:function _processPendingState(props,context){576var inst=this._instance;577var queue=this._pendingStateQueue;578var replace=this._pendingReplaceState;579this._pendingReplaceState=false;580this._pendingStateQueue=null;581if(!queue){582return inst.state;583}584if(replace&&queue.length===1){585return queue[0];586}587var nextState=babelHelpers.extends({},replace?queue[0]:inst.state);588for(var i=replace?1:0;i<queue.length;i++){589var partial=queue[i];590babelHelpers.extends(591nextState,592typeof partial==='function'?593partial.call(inst,nextState,props,context):594partial);595}596return nextState;597},598_performComponentUpdate:function _performComponentUpdate(599nextElement,600nextProps,601nextState,602nextContext,603transaction,604unmaskedContext)605{var _this2=this;606var inst=this._instance;607var hasComponentDidUpdate=Boolean(inst.componentDidUpdate);608var prevProps;609var prevState;610var prevContext;611if(hasComponentDidUpdate){612prevProps=inst.props;613prevState=inst.state;614prevContext=inst.context;615}616if(inst.componentWillUpdate){617if(__DEV__){618measureLifeCyclePerf(619function(){return inst.componentWillUpdate(nextProps,nextState,nextContext);},620this._debugID,621'componentWillUpdate');622}else{623inst.componentWillUpdate(nextProps,nextState,nextContext);624}625}626this._currentElement=nextElement;627this._context=unmaskedContext;628inst.props=nextProps;629inst.state=nextState;630inst.context=nextContext;631this._updateRenderedComponent(transaction,unmaskedContext);632if(hasComponentDidUpdate){633if(__DEV__){634transaction.getReactMountReady().enqueue(function(){635measureLifeCyclePerf(636inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),637_this2._debugID,638'componentDidUpdate');639});640}else{641transaction.getReactMountReady().enqueue(642inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),643inst);644}645}646},647_updateRenderedComponent:function _updateRenderedComponent(transaction,context){648var prevComponentInstance=this._renderedComponent;649var prevRenderedElement=prevComponentInstance._currentElement;650var nextRenderedElement=this._renderValidatedComponent();651var debugID=0;652if(__DEV__){653debugID=this._debugID;654}655if(shouldUpdateReactComponent(prevRenderedElement,nextRenderedElement)){656ReactReconciler.receiveComponent(657prevComponentInstance,658nextRenderedElement,659transaction,660this._processChildContext(context));661}else{662var oldHostNode=ReactReconciler.getHostNode(prevComponentInstance);663ReactReconciler.unmountComponent(prevComponentInstance,false);664var nodeType=ReactNodeTypes.getType(nextRenderedElement);665this._renderedNodeType=nodeType;666var child=this._instantiateReactComponent(667nextRenderedElement,668nodeType!==ReactNodeTypes.EMPTY);669this._renderedComponent=child;670var nextMarkup=ReactReconciler.mountComponent(671child,672transaction,673this._hostParent,674this._hostContainerInfo,675this._processChildContext(context),676debugID);677if(__DEV__){678if(debugID!==0){679var childDebugIDs=child._debugID!==0?[child._debugID]:[];680ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);681}682}683this._replaceNodeWithMarkup(684oldHostNode,685nextMarkup,686prevComponentInstance);687}688},689_replaceNodeWithMarkup:function _replaceNodeWithMarkup(oldHostNode,nextMarkup,prevInstance){690ReactComponentEnvironment.replaceNodeWithMarkup(691oldHostNode,692nextMarkup,693prevInstance);694},695_renderValidatedComponentWithoutOwnerOrContext:function _renderValidatedComponentWithoutOwnerOrContext(){696var inst=this._instance;697var renderedElement;698if(__DEV__){699renderedElement=measureLifeCyclePerf(700function(){return inst.render();},701this._debugID,702'render');703}else{704renderedElement=inst.render();705}706if(__DEV__){707if(renderedElement===undefined&&708inst.render._isMockFunction){709renderedElement=null;710}711}712return renderedElement;713},...

Full Screen

Full Screen

d22e1cReactCompositeComponent.js

Source:d22e1cReactCompositeComponent.js Github

copy

Full Screen

...45}46function isPureComponent(Component){47return!!(Component.prototype&&Component.prototype.isPureReactComponent);48}49function measureLifeCyclePerf(fn,debugID,timerType){50if(debugID===0){51return fn();52}53ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID,timerType);54try{55return fn();56}finally{57ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID,timerType);58}59}60var nextMountID=1;61var ReactCompositeComponent={62construct:function construct(element){63this._currentElement=element;64this._rootNodeID=0;65this._compositeType=null;66this._instance=null;67this._hostParent=null;68this._hostContainerInfo=null;69this._updateBatchNumber=null;70this._pendingElement=null;71this._pendingStateQueue=null;72this._pendingReplaceState=false;73this._pendingForceUpdate=false;74this._renderedNodeType=null;75this._renderedComponent=null;76this._context=null;77this._mountOrder=0;78this._topLevelWrapper=null;79this._pendingCallbacks=null;80this._calledComponentWillUnmount=false;81if(__DEV__){82this._warnedAboutRefsInRender=false;83}84},85mountComponent:function mountComponent(86transaction,87hostParent,88hostContainerInfo,89context)90{var _this=this;91this._context=context;92this._mountOrder=nextMountID++;93this._hostParent=hostParent;94this._hostContainerInfo=hostContainerInfo;95var publicProps=this._currentElement.props;96var publicContext=this._processContext(context);97var Component=this._currentElement.type;98var updateQueue=transaction.getUpdateQueue();99var doConstruct=shouldConstruct(Component);100var inst=this._constructComponent(101doConstruct,102publicProps,103publicContext,104updateQueue);105var renderedElement;106if(!doConstruct&&(inst==null||inst.render==null)){107renderedElement=inst;108warnIfInvalidElement(Component,renderedElement);109invariant(110inst===null||111inst===false||112React.isValidElement(inst),113'%s(...): A valid React element (or null) must be returned. You may have '+114'returned undefined, an array or some other invalid object.',115Component.displayName||Component.name||'Component');116inst=new StatelessComponent(Component);117this._compositeType=CompositeTypes.StatelessFunctional;118}else{119if(isPureComponent(Component)){120this._compositeType=CompositeTypes.PureClass;121}else{122this._compositeType=CompositeTypes.ImpureClass;123}124}125if(__DEV__){126if(inst.render==null){127warning(128false,129'%s(...): No `render` method found on the returned component '+130'instance: you may have forgotten to define `render`.',131Component.displayName||Component.name||'Component');132}133var propsMutated=inst.props!==publicProps;134var componentName=135Component.displayName||Component.name||'Component';136warning(137inst.props===undefined||!propsMutated,138'%s(...): When calling super() in `%s`, make sure to pass '+139'up the same props that your component\'s constructor was passed.',140componentName,componentName);141}142inst.props=publicProps;143inst.context=publicContext;144inst.refs=emptyObject;145inst.updater=updateQueue;146this._instance=inst;147ReactInstanceMap.set(inst,this);148if(__DEV__){149warning(150!inst.getInitialState||151inst.getInitialState.isReactClassApproved,152'getInitialState was defined on %s, a plain JavaScript class. '+153'This is only supported for classes created using React.createClass. '+154'Did you mean to define a state property instead?',155this.getName()||'a component');156warning(157!inst.getDefaultProps||158inst.getDefaultProps.isReactClassApproved,159'getDefaultProps was defined on %s, a plain JavaScript class. '+160'This is only supported for classes created using React.createClass. '+161'Use a static property to define defaultProps instead.',162this.getName()||'a component');163warning(164!inst.propTypes,165'propTypes was defined as an instance property on %s. Use a static '+166'property to define propTypes instead.',167this.getName()||'a component');168warning(169!inst.contextTypes,170'contextTypes was defined as an instance property on %s. Use a '+171'static property to define contextTypes instead.',172this.getName()||'a component');173warning(174typeof inst.componentShouldUpdate!=='function',175'%s has a method called '+176'componentShouldUpdate(). Did you mean shouldComponentUpdate()? '+177'The name is phrased as a question because the function is '+178'expected to return a value.',179this.getName()||'A component');180warning(181typeof inst.componentDidUnmount!=='function',182'%s has a method called '+183'componentDidUnmount(). But there is no such lifecycle method. '+184'Did you mean componentWillUnmount()?',185this.getName()||'A component');186warning(187typeof inst.componentWillRecieveProps!=='function',188'%s has a method called '+189'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',190this.getName()||'A component');191}192var initialState=inst.state;193if(initialState===undefined){194inst.state=initialState=null;195}196invariant(197typeof initialState==='object'&&!Array.isArray(initialState),198'%s.state: must be set to an object or null',199this.getName()||'ReactCompositeComponent');200this._pendingStateQueue=null;201this._pendingReplaceState=false;202this._pendingForceUpdate=false;203var markup;204if(inst.unstable_handleError){205markup=this.performInitialMountWithErrorHandling(206renderedElement,207hostParent,208hostContainerInfo,209transaction,210context);211}else{212markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);213}214if(inst.componentDidMount){215if(__DEV__){216transaction.getReactMountReady().enqueue(function(){217measureLifeCyclePerf(218function(){return inst.componentDidMount();},219_this._debugID,220'componentDidMount');221});222}else{223transaction.getReactMountReady().enqueue(inst.componentDidMount,inst);224}225}226return markup;227},228_constructComponent:function _constructComponent(229doConstruct,230publicProps,231publicContext,232updateQueue)233{234if(__DEV__){235ReactCurrentOwner.current=this;236try{237return this._constructComponentWithoutOwner(238doConstruct,239publicProps,240publicContext,241updateQueue);242}finally{243ReactCurrentOwner.current=null;244}245}else{246return this._constructComponentWithoutOwner(247doConstruct,248publicProps,249publicContext,250updateQueue);251}252},253_constructComponentWithoutOwner:function _constructComponentWithoutOwner(254doConstruct,255publicProps,256publicContext,257updateQueue)258{259var Component=this._currentElement.type;260if(doConstruct){261if(__DEV__){262return measureLifeCyclePerf(263function(){return new Component(publicProps,publicContext,updateQueue);},264this._debugID,265'ctor');266}else{267return new Component(publicProps,publicContext,updateQueue);268}269}270if(__DEV__){271return measureLifeCyclePerf(272function(){return Component(publicProps,publicContext,updateQueue);},273this._debugID,274'render');275}else{276return Component(publicProps,publicContext,updateQueue);277}278},279performInitialMountWithErrorHandling:function performInitialMountWithErrorHandling(280renderedElement,281hostParent,282hostContainerInfo,283transaction,284context)285{286var markup;287var checkpoint=transaction.checkpoint();288try{289markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);290}catch(e){291transaction.rollback(checkpoint);292this._instance.unstable_handleError(e);293if(this._pendingStateQueue){294this._instance.state=this._processPendingState(this._instance.props,this._instance.context);295}296checkpoint=transaction.checkpoint();297this._renderedComponent.unmountComponent(true);298transaction.rollback(checkpoint);299markup=this.performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context);300}301return markup;302},303performInitialMount:function performInitialMount(renderedElement,hostParent,hostContainerInfo,transaction,context){304var inst=this._instance;305var debugID=0;306if(__DEV__){307debugID=this._debugID;308}309if(inst.componentWillMount){310if(__DEV__){311measureLifeCyclePerf(312function(){return inst.componentWillMount();},313debugID,314'componentWillMount');315}else{316inst.componentWillMount();317}318if(this._pendingStateQueue){319inst.state=this._processPendingState(inst.props,inst.context);320}321}322if(renderedElement===undefined){323renderedElement=this._renderValidatedComponent();324}325var nodeType=ReactNodeTypes.getType(renderedElement);326this._renderedNodeType=nodeType;327var child=this._instantiateReactComponent(328renderedElement,329nodeType!==ReactNodeTypes.EMPTY);330this._renderedComponent=child;331var markup=ReactReconciler.mountComponent(332child,333transaction,334hostParent,335hostContainerInfo,336this._processChildContext(context),337debugID);338if(__DEV__){339if(debugID!==0){340var childDebugIDs=child._debugID!==0?[child._debugID]:[];341ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);342}343}344return markup;345},346getHostNode:function getHostNode(){347return ReactReconciler.getHostNode(this._renderedComponent);348},349unmountComponent:function unmountComponent(safely){350if(!this._renderedComponent){351return;352}353var inst=this._instance;354if(inst.componentWillUnmount&&!inst._calledComponentWillUnmount){355inst._calledComponentWillUnmount=true;356if(safely){357var name=this.getName()+'.componentWillUnmount()';358ReactErrorUtils.invokeGuardedCallback(name,inst.componentWillUnmount.bind(inst));359}else{360if(__DEV__){361measureLifeCyclePerf(362function(){return inst.componentWillUnmount();},363this._debugID,364'componentWillUnmount');365}else{366inst.componentWillUnmount();367}368}369}370if(this._renderedComponent){371ReactReconciler.unmountComponent(this._renderedComponent,safely);372this._renderedNodeType=null;373this._renderedComponent=null;374this._instance=null;375}376this._pendingStateQueue=null;377this._pendingReplaceState=false;378this._pendingForceUpdate=false;379this._pendingCallbacks=null;380this._pendingElement=null;381this._context=null;382this._rootNodeID=0;383this._topLevelWrapper=null;384ReactInstanceMap.remove(inst);385},386_maskContext:function _maskContext(context){387var Component=this._currentElement.type;388var contextTypes=Component.contextTypes;389if(!contextTypes){390return emptyObject;391}392var maskedContext={};393for(var contextName in contextTypes){394maskedContext[contextName]=context[contextName];395}396return maskedContext;397},398_processContext:function _processContext(context){399var maskedContext=this._maskContext(context);400if(__DEV__){401var Component=this._currentElement.type;402if(Component.contextTypes){403this._checkContextTypes(404Component.contextTypes,405maskedContext,406'context');407}408}409return maskedContext;410},411_processChildContext:function _processChildContext(currentContext){412var Component=this._currentElement.type;413var inst=this._instance;414var childContext;415if(inst.getChildContext){416if(__DEV__){417ReactInstrumentation.debugTool.onBeginProcessingChildContext();418try{419childContext=inst.getChildContext();420}finally{421ReactInstrumentation.debugTool.onEndProcessingChildContext();422}423}else{424childContext=inst.getChildContext();425}426}427if(childContext){428invariant(429typeof Component.childContextTypes==='object',430'%s.getChildContext(): childContextTypes must be defined in order to '+431'use getChildContext().',432this.getName()||'ReactCompositeComponent');433if(__DEV__){434this._checkContextTypes(435Component.childContextTypes,436childContext,437'childContext');438}439for(var name in childContext){440invariant(441name in Component.childContextTypes,442'%s.getChildContext(): key "%s" is not defined in childContextTypes.',443this.getName()||'ReactCompositeComponent',444name);445}446return babelHelpers.extends({},currentContext,childContext);447}448return currentContext;449},450_checkContextTypes:function _checkContextTypes(451typeSpecs,452values,453location)454{455if(__DEV__){456checkReactTypeSpec(457typeSpecs,458values,459location,460this.getName(),461null,462this._debugID);463}464},465receiveComponent:function receiveComponent(nextElement,transaction,nextContext){466var prevElement=this._currentElement;467var prevContext=this._context;468this._pendingElement=null;469this.updateComponent(470transaction,471prevElement,472nextElement,473prevContext,474nextContext);475},476performUpdateIfNecessary:function performUpdateIfNecessary(transaction){477if(this._pendingElement!=null){478ReactReconciler.receiveComponent(479this,480this._pendingElement,481transaction,482this._context);483}else if(this._pendingStateQueue!==null||this._pendingForceUpdate){484this.updateComponent(485transaction,486this._currentElement,487this._currentElement,488this._context,489this._context);490}else{491this._updateBatchNumber=null;492}493},494updateComponent:function updateComponent(495transaction,496prevParentElement,497nextParentElement,498prevUnmaskedContext,499nextUnmaskedContext)500{501var inst=this._instance;502invariant(503inst!=null,504'Attempted to update component `%s` that has already been unmounted '+505'(or failed to mount).',506this.getName()||'ReactCompositeComponent');507var willReceive=false;508var nextContext;509if(this._context===nextUnmaskedContext){510nextContext=inst.context;511}else{512nextContext=this._processContext(nextUnmaskedContext);513willReceive=true;514}515var prevProps=prevParentElement.props;516var nextProps=nextParentElement.props;517if(prevParentElement!==nextParentElement){518willReceive=true;519}520if(willReceive&&inst.componentWillReceiveProps){521if(__DEV__){522measureLifeCyclePerf(523function(){return inst.componentWillReceiveProps(nextProps,nextContext);},524this._debugID,525'componentWillReceiveProps');526}else{527inst.componentWillReceiveProps(nextProps,nextContext);528}529}530var nextState=this._processPendingState(nextProps,nextContext);531var shouldUpdate=true;532if(!this._pendingForceUpdate){533if(inst.shouldComponentUpdate){534if(__DEV__){535shouldUpdate=measureLifeCyclePerf(536function(){return inst.shouldComponentUpdate(nextProps,nextState,nextContext);},537this._debugID,538'shouldComponentUpdate');539}else{540shouldUpdate=inst.shouldComponentUpdate(nextProps,nextState,nextContext);541}542}else{543if(this._compositeType===CompositeTypes.PureClass){544shouldUpdate=545!shallowEqual(prevProps,nextProps)||546!shallowEqual(inst.state,nextState);547}548}549}550if(__DEV__){551warning(552shouldUpdate!==undefined,553'%s.shouldComponentUpdate(): Returned undefined instead of a '+554'boolean value. Make sure to return true or false.',555this.getName()||'ReactCompositeComponent');556}557this._updateBatchNumber=null;558if(shouldUpdate){559this._pendingForceUpdate=false;560this._performComponentUpdate(561nextParentElement,562nextProps,563nextState,564nextContext,565transaction,566nextUnmaskedContext);567}else{568this._currentElement=nextParentElement;569this._context=nextUnmaskedContext;570inst.props=nextProps;571inst.state=nextState;572inst.context=nextContext;573}574},575_processPendingState:function _processPendingState(props,context){576var inst=this._instance;577var queue=this._pendingStateQueue;578var replace=this._pendingReplaceState;579this._pendingReplaceState=false;580this._pendingStateQueue=null;581if(!queue){582return inst.state;583}584if(replace&&queue.length===1){585return queue[0];586}587var nextState=babelHelpers.extends({},replace?queue[0]:inst.state);588for(var i=replace?1:0;i<queue.length;i++){589var partial=queue[i];590babelHelpers.extends(591nextState,592typeof partial==='function'?593partial.call(inst,nextState,props,context):594partial);595}596return nextState;597},598_performComponentUpdate:function _performComponentUpdate(599nextElement,600nextProps,601nextState,602nextContext,603transaction,604unmaskedContext)605{var _this2=this;606var inst=this._instance;607var hasComponentDidUpdate=Boolean(inst.componentDidUpdate);608var prevProps;609var prevState;610var prevContext;611if(hasComponentDidUpdate){612prevProps=inst.props;613prevState=inst.state;614prevContext=inst.context;615}616if(inst.componentWillUpdate){617if(__DEV__){618measureLifeCyclePerf(619function(){return inst.componentWillUpdate(nextProps,nextState,nextContext);},620this._debugID,621'componentWillUpdate');622}else{623inst.componentWillUpdate(nextProps,nextState,nextContext);624}625}626this._currentElement=nextElement;627this._context=unmaskedContext;628inst.props=nextProps;629inst.state=nextState;630inst.context=nextContext;631this._updateRenderedComponent(transaction,unmaskedContext);632if(hasComponentDidUpdate){633if(__DEV__){634transaction.getReactMountReady().enqueue(function(){635measureLifeCyclePerf(636inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),637_this2._debugID,638'componentDidUpdate');639});640}else{641transaction.getReactMountReady().enqueue(642inst.componentDidUpdate.bind(inst,prevProps,prevState,prevContext),643inst);644}645}646},647_updateRenderedComponent:function _updateRenderedComponent(transaction,context){648var prevComponentInstance=this._renderedComponent;649var prevRenderedElement=prevComponentInstance._currentElement;650var nextRenderedElement=this._renderValidatedComponent();651var debugID=0;652if(__DEV__){653debugID=this._debugID;654}655if(shouldUpdateReactComponent(prevRenderedElement,nextRenderedElement)){656ReactReconciler.receiveComponent(657prevComponentInstance,658nextRenderedElement,659transaction,660this._processChildContext(context));661}else{662var oldHostNode=ReactReconciler.getHostNode(prevComponentInstance);663ReactReconciler.unmountComponent(prevComponentInstance,false);664var nodeType=ReactNodeTypes.getType(nextRenderedElement);665this._renderedNodeType=nodeType;666var child=this._instantiateReactComponent(667nextRenderedElement,668nodeType!==ReactNodeTypes.EMPTY);669this._renderedComponent=child;670var nextMarkup=ReactReconciler.mountComponent(671child,672transaction,673this._hostParent,674this._hostContainerInfo,675this._processChildContext(context),676debugID);677if(__DEV__){678if(debugID!==0){679var childDebugIDs=child._debugID!==0?[child._debugID]:[];680ReactInstrumentation.debugTool.onSetChildren(debugID,childDebugIDs);681}682}683this._replaceNodeWithMarkup(684oldHostNode,685nextMarkup,686prevComponentInstance);687}688},689_replaceNodeWithMarkup:function _replaceNodeWithMarkup(oldHostNode,nextMarkup,prevInstance){690ReactComponentEnvironment.replaceNodeWithMarkup(691oldHostNode,692nextMarkup,693prevInstance);694},695_renderValidatedComponentWithoutOwnerOrContext:function _renderValidatedComponentWithoutOwnerOrContext(){696var inst=this._instance;697var renderedElement;698if(__DEV__){699renderedElement=measureLifeCyclePerf(700function(){return inst.render();},701this._debugID,702'render');703}else{704renderedElement=inst.render();705}706if(__DEV__){707if(renderedElement===undefined&&708inst.render._isMockFunction){709renderedElement=null;710}711}712return renderedElement;713},...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const metrics = await page._client.send('Performance.getMetrics');7 console.log(metrics);8 await browser.close();9})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2(async () => {3 const browser = await playwright['chromium'].launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 console.log(await page.evaluate(() => window['playwright'].measureLifeCyclePerf()));7 await browser.close();8})();9const playwright = require('playwright');10(async () => {11 const browser = await playwright['chromium'].launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 console.log(await page.evaluate(() => window['playwright'].measureLifeCyclePerf()));15 await browser.close();16})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { measureLifeCyclePerf } = require('playwright/lib/server/browserContext');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const perf = await measureLifeCyclePerf(page, async () => {8 await page.click('text=Get started');9 });10 console.log('Time to domcontentloaded: ' + perf.domContentLoaded);11 console.log('Time to load: ' + perf.load);12 console.log('Time to first contentful paint: ' + perf.firstContentfulPaint);13 await browser.close();14})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { measureLifeCyclePerf } = require('playwright/lib/utils/trace');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const result = await measureLifeCyclePerf(page, async () => {8 await page.click('text=Get started');9 });10 console.log(result);11 await browser.close();12})();13{14}15const { measureLifeCyclePerf } = require('playwright/lib/utils/trace');16const { chromium } = require('playwright');17(async () => {18 const browser = await chromium.launch();19 const context = await browser.newContext();20 const page = await context.newPage();21 const result = await measureLifeCyclePerf(page, async () => {22 await page.click('text=Get started');23 }, 'load');24 console.log(result);25 await browser.close();26})();27{28}29const { measureLifeCyclePerf } = require('playwright/lib/utils/trace');30const { chromium } = require('playwright');31(async () => {32 const browser = await chromium.launch();33 const context = await browser.newContext();34 const page = await context.newPage();35 const result = await measureLifeCyclePerf(page, async () => {36 await page.click('text=Get started');37 }, 'networkidle');38 console.log(result);39 await browser.close();40})();41{42}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require("playwright");2const { measureLifeCyclePerf } = require("playwright/lib/server/performance");3const browser = await chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6const { metrics } = await measureLifeCyclePerf(page, async () => {7});8console.log(metrics);9await browser.close();10{11}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2(async () => {3 const browser = await playwright.chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const metrics = await page._client.send('Performance.getMetrics');7 console.log(metrics);8 await browser.close();9})();10[{11}, {12}, {13}, {14}, {15}, {16}, {17}, {18}, {19}, {20}, {21}, {22}, {23}, {24}, {25}, {26}, {27}, {28}, {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { measureLifeCyclePerf } = require('playwright/lib/server/trace/recorder/recorderApp');2(async () => {3})();4const { measureLifeCyclePerf } = require('playwright/lib/server/trace/recorder/recorderApp');5const fs = require('fs');6(async () => {7 fs.writeFileSync('perfMetrics.json', JSON.stringify(perfMetrics, null, 2));8})();

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful