@samitouri / QOS-React / commits / e1ed610740

Remove the notion of transactions

We don't need to wait for the commit phase to start listening to events since we have the node. Next we'll stop unlistening to events too and instead just check isMounted.

Sebastian Markbage committed Nov 15, 2016 at 19:26 UTC e1ed6107406d3ab101fc7bf1c6ec7f1b7cb6cb81
1 file changed +28 -87
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+28 -87
@@ -14,7 +14,6 @@
14
15 'use strict';
16
17 -var AutoFocusUtils = require('AutoFocusUtils');
17 var CSSPropertyOperations = require('CSSPropertyOperations');
18 var DOMNamespaces = require('DOMNamespaces');
19 var DOMProperty = require('DOMProperty');
@@ -26,10 +25,10 @@ var ReactDOMFiberInput = require('ReactDOMFiberInput');
25 var ReactDOMFiberOption = require('ReactDOMFiberOption');
26 var ReactDOMFiberSelect = require('ReactDOMFiberSelect');
27 var ReactDOMFiberTextarea = require('ReactDOMFiberTextarea');
29 -var ReactServerRenderingTransaction = require('ReactServerRenderingTransaction');
28
29 var emptyFunction = require('emptyFunction');
30 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
31 +var focusNode = require('focusNode');
32 var invariant = require('invariant');
33 var isEventSupported = require('isEventSupported');
34 var setInnerHTML = require('setInnerHTML');
@@ -135,10 +134,7 @@ function assertValidProps(component, props) {
134 );
135 }
136
138 -function ensureListeningTo(inst, registrationName, transaction) {
139 - if (transaction instanceof ReactServerRenderingTransaction) {
140 - return;
141 - }
137 +function ensureListeningTo(inst, registrationName) {
138 if (__DEV__) {
139 // IE8 has no API for event capturing and the `onScroll` event doesn't
140 // bubble.
@@ -153,21 +149,6 @@ function ensureListeningTo(inst, registrationName, transaction) {
149 listenTo(registrationName, doc);
150 }
151
156 -function inputPostMount() {
157 - var inst = this;
158 - ReactDOMFiberInput.postMountWrapper(inst);
159 -}
160 -
161 -function textareaPostMount() {
162 - var inst = this;
163 - ReactDOMFiberTextarea.postMountWrapper(inst);
164 -}
165 -
166 -function optionPostMount() {
167 - var inst = this;
168 - ReactDOMFiberOption.postMountWrapper(inst);
169 -}
170 -
152 // There are so many media events, it makes sense to just
153 // maintain a list rather than create a `trapBubbledEvent` for each
154 var mediaEvents = {
@@ -196,11 +177,7 @@ var mediaEvents = {
177 topWaiting: 'waiting',
178 };
179
199 -function trackInputValue() {
200 - inputValueTracking.track(this);
201 -}
202 -
203 -function trapClickOnNonInteractiveElement() {
180 +function trapClickOnNonInteractiveElement(inst) {
181 // Mobile Safari does not fire properly bubble click events on
182 // non-interactive elements, which means delegated click listeners do not
183 // fire. The workaround for this bug involves attaching an empty click
@@ -210,12 +187,11 @@ function trapClickOnNonInteractiveElement() {
187 // bookkeeping for it. Not sure if we need to clear it when the listener is
188 // removed.
189 // TODO: Only do this for the relevant Safaris maybe?
213 - var node = getNode(this);
190 + var node = getNode(inst);
191 node.onclick = emptyFunction;
192 }
193
217 -function trapBubbledEventsLocal() {
218 - var inst = this;
194 +function trapBubbledEventsLocal(inst) {
195 // If a component renders to null or if another component fatals and causes
196 // the state of the tree to be corrupted, `node` here can be null.
197 var node = getNode(inst);
@@ -303,10 +279,6 @@ function trapBubbledEventsLocal() {
279 }
280 }
281
306 -function postUpdateSelectWrapper() {
307 - ReactDOMFiberSelect.postUpdateWrapper(this);
308 -}
309 -
282 // For HTML, certain tags should omit their close tag. We keep a whitelist for
283 // those special-case tags.
284
@@ -381,7 +353,6 @@ function updateDOMProperties(
353 workInProgress,
354 lastProps,
355 nextProps,
384 - transaction,
356 isCustomComponentTag
357 ) {
358 var propKey;
@@ -485,7 +456,7 @@ function updateDOMProperties(
456 // Noop
457 } else if (registrationNameModules.hasOwnProperty(propKey)) {
458 if (nextProp) {
488 - ensureListeningTo(workInProgress, propKey, transaction);
459 + ensureListeningTo(workInProgress, propKey);
460 }
461 } else if (isCustomComponentTag) {
462 DOMPropertyOperations.setValueForAttribute(
@@ -524,7 +495,6 @@ var ReactDOMFiberComponent = {
495 * is not idempotent.
496 *
497 * @internal
527 - * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
498 * @param {?ReactDOMComponent} the parent component instance
499 * @param {?object} info about the host container
500 * @param {object} context
@@ -532,7 +502,6 @@ var ReactDOMFiberComponent = {
502 */
503 mountComponent: function(
504 workInProgress : Fiber,
535 - transaction,
505 hostParent,
506 hostContainerInfo,
507 context
@@ -557,16 +526,16 @@ var ReactDOMFiberComponent = {
526 workInProgress._wrapperState = {
527 listeners: null,
528 };
560 - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, workInProgress);
529 + trapBubbledEventsLocal(workInProgress);
530 break;
531 case 'input':
532 ReactDOMFiberInput.mountWrapper(workInProgress, props, hostParent);
533 props = ReactDOMFiberInput.getHostProps(workInProgress, props);
565 - transaction.getReactMountReady().enqueue(trackInputValue, workInProgress);
566 - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, workInProgress);
534 + inputValueTracking.track(workInProgress);
535 + trapBubbledEventsLocal(workInProgress);
536 // For controlled components we always need to ensure we're listening
537 // to onChange. Even if there is no listener.
569 - ensureListeningTo(workInProgress, 'onChange', transaction);
538 + ensureListeningTo(workInProgress, 'onChange');
539 break;
540 case 'option':
541 ReactDOMFiberOption.mountWrapper(workInProgress, props, hostParent);
@@ -575,19 +544,19 @@ var ReactDOMFiberComponent = {
544 case 'select':
545 ReactDOMFiberSelect.mountWrapper(workInProgress, props, hostParent);
546 props = ReactDOMFiberSelect.getHostProps(workInProgress, props);
578 - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, workInProgress);
547 + trapBubbledEventsLocal(workInProgress);
548 // For controlled components we always need to ensure we're listening
549 // to onChange. Even if there is no listener.
581 - ensureListeningTo(workInProgress, 'onChange', transaction);
550 + ensureListeningTo(workInProgress, 'onChange');
551 break;
552 case 'textarea':
553 ReactDOMFiberTextarea.mountWrapper(workInProgress, props, hostParent);
554 props = ReactDOMFiberTextarea.getHostProps(workInProgress, props);
586 - transaction.getReactMountReady().enqueue(trackInputValue, workInProgress);
587 - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, workInProgress);
555 + inputValueTracking.track(workInProgress);
556 + trapBubbledEventsLocal(workInProgress);
557 // For controlled components we always need to ensure we're listening
558 // to onChange. Even if there is no listener.
590 - ensureListeningTo(workInProgress, 'onChange', transaction);
559 + ensureListeningTo(workInProgress, 'onChange');
560 break;
561 }
562
@@ -658,61 +627,37 @@ var ReactDOMFiberComponent = {
627 if (!workInProgress._hostParent) {
628 DOMPropertyOperations.setAttributeForRoot(el);
629 }
661 - updateDOMProperties(workInProgress, null, props, transaction, isCustomComponentTag);
630 + updateDOMProperties(workInProgress, null, props, isCustomComponentTag);
631
632 switch (workInProgress._tag) {
633 case 'input':
665 - transaction.getReactMountReady().enqueue(
666 - inputPostMount,
667 - workInProgress
668 - );
634 + ReactDOMFiberInput.postMountWrapper(workInProgress);
635 if (props.autoFocus) {
670 - transaction.getReactMountReady().enqueue(
671 - AutoFocusUtils.focusDOMComponent,
672 - workInProgress
673 - );
636 + focusNode(getNode(workInProgress));
637 }
638 break;
639 case 'textarea':
677 - transaction.getReactMountReady().enqueue(
678 - textareaPostMount,
679 - workInProgress
680 - );
640 + ReactDOMFiberTextarea.postMountWrapper(workInProgress);
641 if (props.autoFocus) {
682 - transaction.getReactMountReady().enqueue(
683 - AutoFocusUtils.focusDOMComponent,
684 - workInProgress
685 - );
642 + focusNode(getNode(workInProgress));
643 }
644 break;
645 case 'select':
646 if (props.autoFocus) {
690 - transaction.getReactMountReady().enqueue(
691 - AutoFocusUtils.focusDOMComponent,
692 - workInProgress
693 - );
647 + focusNode(getNode(workInProgress));
648 }
649 break;
650 case 'button':
651 if (props.autoFocus) {
698 - transaction.getReactMountReady().enqueue(
699 - AutoFocusUtils.focusDOMComponent,
700 - workInProgress
701 - );
652 + focusNode(getNode(workInProgress));
653 }
654 break;
655 case 'option':
705 - transaction.getReactMountReady().enqueue(
706 - optionPostMount,
707 - workInProgress
708 - );
656 + ReactDOMFiberOption.postMountWrapper(workInProgress);
657 break;
658 default:
659 if (typeof props.onClick === 'function') {
712 - transaction.getReactMountReady().enqueue(
713 - trapClickOnNonInteractiveElement,
714 - workInProgress
715 - );
660 + trapClickOnNonInteractiveElement(workInProgress);
661 }
662 break;
663 }
@@ -726,10 +671,9 @@ var ReactDOMFiberComponent = {
671 *
672 * @internal
673 * @param {ReactElement} nextElement
729 - * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
674 * @param {object} context
675 */
732 - receiveComponent: function(workInProgress : Fiber, nextElement, transaction, context) {
676 + receiveComponent: function(workInProgress : Fiber, nextElement, context) {
677 var prevElement = workInProgress._currentElement;
678 workInProgress._currentElement = nextElement;
679
@@ -756,17 +700,14 @@ var ReactDOMFiberComponent = {
700 default:
701 if (typeof lastProps.onClick !== 'function' &&
702 typeof nextProps.onClick === 'function') {
759 - transaction.getReactMountReady().enqueue(
760 - trapClickOnNonInteractiveElement,
761 - workInProgress
762 - );
703 + trapClickOnNonInteractiveElement(workInProgress);
704 }
705 break;
706 }
707
708 assertValidProps(workInProgress, nextProps);
709 var isCustomComponentTag = isCustomComponent(workInProgress._tag, nextProps);
769 - updateDOMProperties(workInProgress, lastProps, nextProps, transaction, isCustomComponentTag);
710 + updateDOMProperties(workInProgress, lastProps, nextProps, isCustomComponentTag);
711
712 switch (workInProgress._tag) {
713 case 'input':
@@ -781,7 +722,7 @@ var ReactDOMFiberComponent = {
722 case 'select':
723 // <select> value update needs to occur after <option> children
724 // reconciliation
784 - transaction.getReactMountReady().enqueue(postUpdateSelectWrapper, workInProgress);
725 + ReactDOMFiberSelect.postUpdateWrapper(workInProgress);
726 break;
727 }
728 },