Skip to content

Commit

Permalink
Unfork Lazy Component Branches (facebook#13902)
Browse files Browse the repository at this point in the history 
* Introduce elementType field

This will be used to store the wrapped type of an element. E.g. pure and
lazy.

The existing type field will be used for the unwrapped type within them.

* Store the unwrapped type on the type field of lazy components

* Use the raw tags for lazy components

Instead, we check if the elementType and type are equal to test if
we need to resolve props. This is slightly slower in the normal case
but will yield less code and branching.

* Clean up lazy branches

* Collapse work tag numbering

* Split IndeterminateComponent out from Lazy

This way we don't have to check the type in a hacky way in the
indeterminate path. Also, lets us deal with lazy that resolves to
indeterminate and such.

* Missing clean up in rebase
  • Loading branch information
@sebmarkbage @jetoneza
sebmarkbage authored and jetoneza committed Jan 23, 2019
1 parent 37e3209 commit b0e0ede
Show file tree
Hide file tree
Showing 18 changed files with 255 additions and 359 deletions.
6 changes: 1 addition & 5 deletions packages/react-dom/src/test-utils/ReactTestUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@ import {findCurrentFiberUsingSlowPath} from 'react-reconciler/reflection';
import * as ReactInstanceMap from 'shared/ReactInstanceMap';
import {
ClassComponent,
ClassComponentLazy,
FunctionComponent,
FunctionComponentLazy,
HostComponent,
HostText,
} from 'shared/ReactWorkTags';
Expand Down Expand Up @@ -92,9 +90,7 @@ function findAllInRenderedFiberTreeInternal(fiber, test) {
node.tag === HostComponent ||
node.tag === HostText ||
node.tag === ClassComponent ||
node.tag === ClassComponentLazy ||
node.tag === FunctionComponent ||
node.tag === FunctionComponentLazy
node.tag === FunctionComponent
) {
const publicInst = node.stateNode;
if (test(publicInst)) {
Expand Down
11 changes: 4 additions & 7 deletions packages/react-reconciler/src/ReactChildFiber.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
import {
FunctionComponent,
ClassComponent,
ClassComponentLazy,
HostText,
HostPortal,
Fragment,
Expand Down Expand Up @@ -138,8 +137,7 @@ function coerceRef(
if (owner) {
const ownerFiber = ((owner: any): Fiber);
invariant(
ownerFiber.tag === ClassComponent ||
ownerFiber.tag === ClassComponentLazy,
ownerFiber.tag === ClassComponent,
'Function components cannot have refs.',
);
inst = ownerFiber.stateNode;
Expand Down Expand Up @@ -379,7 +377,7 @@ function ChildReconciler(shouldTrackSideEffects) {
element: ReactElement,
expirationTime: ExpirationTime,
): Fiber {
if (current !== null && current.type === element.type) {
if (current !== null && current.elementType === element.type) {
// Move based on index
const existing = useFiber(current, element.props, expirationTime);
existing.ref = coerceRef(returnFiber, current, element);
Expand Down Expand Up @@ -1122,7 +1120,7 @@ function ChildReconciler(shouldTrackSideEffects) {
if (
child.tag === Fragment
? element.type === REACT_FRAGMENT_TYPE
: child.type === element.type
: child.elementType === element.type
) {
deleteRemainingChildren(returnFiber, child.sibling);
const existing = useFiber(
Expand Down Expand Up @@ -1309,8 +1307,7 @@ function ChildReconciler(shouldTrackSideEffects) {
// component, throw an error. If Fiber return types are disabled,
// we already threw above.
switch (returnFiber.tag) {
case ClassComponent:
case ClassComponentLazy: {
case ClassComponent: {
if (__DEV__) {
const instance = returnFiber.stateNode;
if (instance.render._isMockFunction) {
Expand Down
6 changes: 2 additions & 4 deletions packages/react-reconciler/src/ReactCurrentFiber.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
import {
IndeterminateComponent,
FunctionComponent,
FunctionComponentLazy,
ClassComponent,
ClassComponentLazy,
HostComponent,
Mode,
LazyComponent,
} from 'shared/ReactWorkTags';
import describeComponentFrame from 'shared/describeComponentFrame';
import getComponentName from 'shared/getComponentName';
Expand All @@ -29,10 +28,9 @@ type LifeCyclePhase = 'render' | 'getChildContext';
function describeFiber(fiber: Fiber): string {
switch (fiber.tag) {
case IndeterminateComponent:
case LazyComponent:
case FunctionComponent:
case FunctionComponentLazy:
case ClassComponent:
case ClassComponentLazy:
case HostComponent:
case Mode:
const owner = fiber._debugOwner;
Expand Down
117 changes: 92 additions & 25 deletions packages/react-reconciler/src/ReactFiber.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,9 @@ import {
ContextConsumer,
Profiler,
SuspenseComponent,
FunctionComponentLazy,
ClassComponentLazy,
ForwardRefLazy,
FunctionComponent,
PureComponent,
PureComponentLazy,
LazyComponent,
} from 'shared/ReactWorkTags';
import getComponentName from 'shared/getComponentName';

Expand Down Expand Up @@ -101,7 +99,11 @@ export type Fiber = {|
// Unique identifier of this child.
key: null | string,

// The function/class/module associated with this fiber.
// The value of element.type which is used to preserve the identity during
// reconciliation of this child.
elementType: any,

// The resolved function/class/ associated with this fiber.
type: any,

// The local state associated with this fiber.
Expand Down Expand Up @@ -219,6 +221,7 @@ function FiberNode(
// Instance
this.tag = tag;
this.key = key;
this.elementType = null;
this.type = null;
this.stateNode = null;

Expand Down Expand Up @@ -301,16 +304,14 @@ export function resolveLazyComponentTag(
Component: Function,
): WorkTag {
if (typeof Component === 'function') {
return shouldConstruct(Component)
? ClassComponentLazy
: FunctionComponentLazy;
return shouldConstruct(Component) ? ClassComponent : FunctionComponent;
} else if (Component !== undefined && Component !== null) {
const $$typeof = Component.$$typeof;
if ($$typeof === REACT_FORWARD_REF_TYPE) {
return ForwardRefLazy;
return ForwardRef;
}
if ($$typeof === REACT_PURE_TYPE) {
return PureComponentLazy;
return PureComponent;
}
}
return IndeterminateComponent;
Expand All @@ -335,6 +336,7 @@ export function createWorkInProgress(
current.key,
current.mode,
);
workInProgress.elementType = current.elementType;
workInProgress.type = current.type;
workInProgress.stateNode = current.stateNode;

Expand Down Expand Up @@ -404,7 +406,7 @@ export function createHostRootFiber(isConcurrent: boolean): Fiber {
return createFiber(HostRoot, null, null, mode);
}

export function createFiberFromElement(
function createFiberFromElementWithoutDebugInfo(
element: ReactElement,
mode: TypeOfMode,
expirationTime: ExpirationTime,
Expand All @@ -419,9 +421,13 @@ export function createFiberFromElement(
const key = element.key;
const pendingProps = element.props;

let fiberTag;
let fiberTag = IndeterminateComponent;
// The resolved type is set if we know what the final type will be. I.e. it's not lazy.
let resolvedType = type;
if (typeof type === 'function') {
fiberTag = shouldConstruct(type) ? ClassComponent : IndeterminateComponent;
if (shouldConstruct(type)) {
fiberTag = ClassComponent;
}
} else if (typeof type === 'string') {
fiberTag = HostComponent;
} else {
Expand All @@ -434,18 +440,23 @@ export function createFiberFromElement(
key,
);
case REACT_CONCURRENT_MODE_TYPE:
fiberTag = Mode;
mode |= ConcurrentMode | StrictMode;
break;
return createFiberFromMode(
pendingProps,
mode | ConcurrentMode | StrictMode,
expirationTime,
key,
);
case REACT_STRICT_MODE_TYPE:
fiberTag = Mode;
mode |= StrictMode;
break;
return createFiberFromMode(
pendingProps,
mode | StrictMode,
expirationTime,
key,
);
case REACT_PROFILER_TYPE:
return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
case REACT_SUSPENSE_TYPE:
fiberTag = SuspenseComponent;
break;
return createFiberFromSuspense(pendingProps, mode, expirationTime, key);
default: {
if (typeof type === 'object' && type !== null) {
switch (type.$$typeof) {
Expand All @@ -463,7 +474,8 @@ export function createFiberFromElement(
fiberTag = PureComponent;
break getTag;
case REACT_LAZY_TYPE:
fiberTag = IndeterminateComponent;
fiberTag = LazyComponent;
resolvedType = null;
break getTag;
}
}
Expand Down Expand Up @@ -498,14 +510,27 @@ export function createFiberFromElement(
}

fiber = createFiber(fiberTag, pendingProps, key, mode);
fiber.type = type;
fiber.elementType = type;
fiber.type = resolvedType;
fiber.expirationTime = expirationTime;

return fiber;
}

export function createFiberFromElement(
element: ReactElement,
mode: TypeOfMode,
expirationTime: ExpirationTime,
): Fiber {
const fiber = createFiberFromElementWithoutDebugInfo(
element,
mode,
expirationTime,
);
if (__DEV__) {
fiber._debugSource = element._source;
fiber._debugOwner = element._owner;
}

return fiber;
}

Expand All @@ -520,7 +545,7 @@ export function createFiberFromFragment(
return fiber;
}

export function createFiberFromProfiler(
function createFiberFromProfiler(
pendingProps: any,
mode: TypeOfMode,
expirationTime: ExpirationTime,
Expand All @@ -539,12 +564,51 @@ export function createFiberFromProfiler(
}

const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
// TODO: The Profiler fiber shouldn't have a type. It has a tag.
fiber.elementType = REACT_PROFILER_TYPE;
fiber.type = REACT_PROFILER_TYPE;
fiber.expirationTime = expirationTime;

return fiber;
}

function createFiberFromMode(
pendingProps: any,
mode: TypeOfMode,
expirationTime: ExpirationTime,
key: null | string,
): Fiber {
const fiber = createFiber(Mode, pendingProps, key, mode);

// TODO: The Mode fiber shouldn't have a type. It has a tag.
const type =
(mode & ConcurrentMode) === NoContext
? REACT_STRICT_MODE_TYPE
: REACT_CONCURRENT_MODE_TYPE;
fiber.elementType = type;
fiber.type = type;

fiber.expirationTime = expirationTime;
return fiber;
}

export function createFiberFromSuspense(
pendingProps: any,
mode: TypeOfMode,
expirationTime: ExpirationTime,
key: null | string,
) {
const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);

// TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
const type = REACT_SUSPENSE_TYPE;
fiber.elementType = type;
fiber.type = type;

fiber.expirationTime = expirationTime;
return fiber;
}

export function createFiberFromText(
content: string,
mode: TypeOfMode,
Expand All @@ -557,6 +621,8 @@ export function createFiberFromText(

export function createFiberFromHostInstanceForDeletion(): Fiber {
const fiber = createFiber(HostComponent, null, null, NoContext);
// TODO: These should not need a type.
fiber.elementType = 'DELETED';
fiber.type = 'DELETED';
return fiber;
}
Expand Down Expand Up @@ -596,6 +662,7 @@ export function assignFiberPropertiesInDEV(

target.tag = source.tag;
target.key = source.key;
target.elementType = source.elementType;
target.type = source.type;
target.stateNode = source.stateNode;
target.return = source.return;
Expand Down
Loading

0 comments on commit b0e0ede

Please sign in to comment.