Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unfork Lazy Component Branches #13902

Merged
merged 7 commits into from
Oct 20, 2018
Merged

Unfork Lazy Component Branches #13902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aedc6ba
Introduce elementType field
sebmarkbage Oct 20, 2018
4949da9
Store the unwrapped type on the type field of lazy components
sebmarkbage Oct 20, 2018
2e07411
Use the raw tags for lazy components
sebmarkbage Oct 20, 2018
0f75e25
Clean up lazy branches
sebmarkbage Oct 20, 2018
e6b9e26
Collapse work tag numbering
sebmarkbage Oct 20, 2018
6a70389
Split IndeterminateComponent out from Lazy
sebmarkbage Oct 20, 2018
b2ee274
Missing clean up in rebase
sebmarkbage Oct 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions packages/react-dom/src/test-utils/ReactTestUtils.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the two functions? Doesn't look like this is called anywhere else

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So that I can do early returns in the other one. Compiler can restructure and get rid of it in prod.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe you

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