Give wrappers the raw props object
Wrappers operate on the raw props object instead of the processed one. We should probably clean this up a bit since it is very confusing and unnecessary allocations to have two separate objects for props.
Sebastian Markbage committed
Nov 18, 2016 at 15:18 UTC
632ae806e8be646e9bb6c7860509f2d76d9cf0e5
1 file changed
+34
-26
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+34
-26
@@ -519,11 +519,11 @@ var ReactDOMFiberComponent = {
519
setInitialProperties(
520
domElement : Element,
521
tag : string,
522
- props : Object,
522
+ rawProps : Object,
523
rootContainerElement : Element
524
) : void {
525
526
- var isCustomComponentTag = isCustomComponent(tag, props);
526
+ var isCustomComponentTag = isCustomComponent(tag, rawProps);
527
if (__DEV__) {
528
if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
529
warning(
@@ -536,6 +536,7 @@ var ReactDOMFiberComponent = {
536
}
537
}
538
539
+ var props : Object;
540
switch (tag) {
541
case 'audio':
542
case 'form':
@@ -546,10 +547,11 @@ var ReactDOMFiberComponent = {
547
case 'source':
548
case 'video':
549
trapBubbledEventsLocal(domElement, tag);
550
+ props = rawProps;
551
break;
552
case 'input':
551
- ReactDOMFiberInput.mountWrapper(domElement, props);
552
- props = ReactDOMFiberInput.getHostProps(domElement, props);
553
+ ReactDOMFiberInput.mountWrapper(domElement, rawProps);
554
+ props = ReactDOMFiberInput.getHostProps(domElement, rawProps);
555
// TODO: Make sure we check if this is still unmounted or do any clean
556
// up necessary since we never stop tracking anymore.
557
inputValueTracking.trackNode(domElement);
@@ -559,26 +561,28 @@ var ReactDOMFiberComponent = {
561
ensureListeningTo(rootContainerElement, 'onChange');
562
break;
563
case 'option':
562
- ReactDOMFiberOption.mountWrapper(domElement, props);
563
- props = ReactDOMFiberOption.getHostProps(domElement, props);
564
+ ReactDOMFiberOption.mountWrapper(domElement, rawProps);
565
+ props = ReactDOMFiberOption.getHostProps(domElement, rawProps);
566
break;
567
case 'select':
566
- ReactDOMFiberSelect.mountWrapper(domElement, props);
567
- props = ReactDOMFiberSelect.getHostProps(domElement, props);
568
+ ReactDOMFiberSelect.mountWrapper(domElement, rawProps);
569
+ props = ReactDOMFiberSelect.getHostProps(domElement, rawProps);
570
trapBubbledEventsLocal(domElement, tag);
571
// For controlled components we always need to ensure we're listening
572
// to onChange. Even if there is no listener.
573
ensureListeningTo(rootContainerElement, 'onChange');
574
break;
575
case 'textarea':
574
- ReactDOMFiberTextarea.mountWrapper(domElement, props);
575
- props = ReactDOMFiberTextarea.getHostProps(domElement, props);
576
+ ReactDOMFiberTextarea.mountWrapper(domElement, rawProps);
577
+ props = ReactDOMFiberTextarea.getHostProps(domElement, rawProps);
578
inputValueTracking.trackNode(domElement);
579
trapBubbledEventsLocal(domElement, tag);
580
// For controlled components we always need to ensure we're listening
581
// to onChange. Even if there is no listener.
582
ensureListeningTo(rootContainerElement, 'onChange');
583
break;
584
+ default:
585
+ props = rawProps;
586
}
587
588
assertValidProps(tag, props);
@@ -596,13 +600,13 @@ var ReactDOMFiberComponent = {
600
// DOM yet. We need a special effect to handle this.
601
switch (tag) {
602
case 'input':
599
- ReactDOMFiberInput.postMountWrapper(domElement, props);
603
+ ReactDOMFiberInput.postMountWrapper(domElement, rawProps);
604
if (props.autoFocus) {
605
focusNode(domElement);
606
}
607
break;
608
case 'textarea':
605
- ReactDOMFiberTextarea.postMountWrapper(domElement, props);
609
+ ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);
610
if (props.autoFocus) {
611
focusNode(domElement);
612
}
@@ -618,7 +622,7 @@ var ReactDOMFiberComponent = {
622
}
623
break;
624
case 'option':
621
- ReactDOMFiberOption.postMountWrapper(domElement, props);
625
+ ReactDOMFiberOption.postMountWrapper(domElement, rawProps);
626
break;
627
default:
628
if (typeof props.onClick === 'function') {
@@ -632,28 +636,32 @@ var ReactDOMFiberComponent = {
636
updateProperties(
637
domElement : Element,
638
tag : string,
635
- lastProps : Object,
636
- nextProps : Object,
639
+ lastRawProps : Object,
640
+ nextRawProps : Object,
641
rootContainerElement : Element
642
) : void {
643
+ var lastProps : Object;
644
+ var nextProps : Object;
645
switch (tag) {
646
case 'input':
641
- lastProps = ReactDOMFiberInput.getHostProps(domElement, lastProps);
642
- nextProps = ReactDOMFiberInput.getHostProps(domElement, nextProps);
647
+ lastProps = ReactDOMFiberInput.getHostProps(domElement, lastRawProps);
648
+ nextProps = ReactDOMFiberInput.getHostProps(domElement, nextRawProps);
649
break;
650
case 'option':
645
- lastProps = ReactDOMFiberOption.getHostProps(domElement, lastProps);
646
- nextProps = ReactDOMFiberOption.getHostProps(domElement, nextProps);
651
+ lastProps = ReactDOMFiberOption.getHostProps(domElement, lastRawProps);
652
+ nextProps = ReactDOMFiberOption.getHostProps(domElement, nextRawProps);
653
break;
654
case 'select':
649
- lastProps = ReactDOMFiberSelect.getHostProps(domElement, lastProps);
650
- nextProps = ReactDOMFiberSelect.getHostProps(domElement, nextProps);
655
+ lastProps = ReactDOMFiberSelect.getHostProps(domElement, lastRawProps);
656
+ nextProps = ReactDOMFiberSelect.getHostProps(domElement, nextRawProps);
657
break;
658
case 'textarea':
653
- lastProps = ReactDOMFiberTextarea.getHostProps(domElement, lastProps);
654
- nextProps = ReactDOMFiberTextarea.getHostProps(domElement, nextProps);
659
+ lastProps = ReactDOMFiberTextarea.getHostProps(domElement, lastRawProps);
660
+ nextProps = ReactDOMFiberTextarea.getHostProps(domElement, nextRawProps);
661
break;
662
default:
663
+ lastProps = lastRawProps;
664
+ nextProps = nextRawProps;
665
if (typeof lastProps.onClick !== 'function' &&
666
typeof nextProps.onClick === 'function') {
667
// TODO: This cast may not be sound for SVG, MathML or custom elements.
@@ -679,15 +687,15 @@ var ReactDOMFiberComponent = {
687
// Update the wrapper around inputs *after* updating props. This has to
688
// happen after `updateDOMProperties`. Otherwise HTML5 input validations
689
// raise warnings and prevent the new value from being assigned.
682
- ReactDOMFiberInput.updateWrapper(domElement, nextProps);
690
+ ReactDOMFiberInput.updateWrapper(domElement, nextRawProps);
691
break;
692
case 'textarea':
685
- ReactDOMFiberTextarea.updateWrapper(domElement, nextProps);
693
+ ReactDOMFiberTextarea.updateWrapper(domElement, nextRawProps);
694
break;
695
case 'select':
696
// <select> value update needs to occur after <option> children
697
// reconciliation
690
- ReactDOMFiberSelect.postUpdateWrapper(domElement, nextProps);
698
+ ReactDOMFiberSelect.postUpdateWrapper(domElement, nextRawProps);
699
break;
700
}
701
},