Commit Graph
7780 Commits
Author SHA1 Message Date
Andrew Clark d8ade83eb2 Use an UpdateQueue for top-level updates
...rather than mutate the pendingProps directly, which throws away any
previously scheduled work.
2016-12-16 16:30:28 -08:00
Andrew Clark e1eccbfbb0 Merge pull request #8587 from acdlite/fiberupdatequeuefollowup
[Fiber] UpdateQueue follow-up improvements
2016-12-16 16:20:51 -08:00
Andrew Clark 7b6c94c767 Don't drop updates from queue when calling replaceState
We should be able to support passing a function to replaceState, which
receives the accumulation of all the previously applied state updates.
Which means we shouldn't drop those updates from the queue. Technically,
we could drop them only when an object is passed to replaceState, but
that seems like more trouble than it's worth.
2016-12-16 16:20:16 -08:00
Andrew Clark f070aaa1b8 Remove confusing for-loop in favor of a helper function
This logic is hopefully easier to follow. Added more inline comments
to explain how the algorithm works.
2016-12-15 18:15:03 -08:00
Andrew Clark dfe3d089cc Clean up some style nits and other code detritus in the update queue 2016-12-15 18:10:25 -08:00
Andrew Clark ea622e52c2 Use warning instead of console.error 2016-12-15 17:34:24 -08:00
Andrew Clark 7fca464e7c Merge pull request #8538 from acdlite/fiberupdatequeue
[Fiber] Separate priority for updates
2016-12-15 16:41:53 -08:00
Andrew Clark b8441ba955 Remove ForceUpdate effect
Go back to using a flag, instead. I removed it before because I thought
we might want to get rid of the top-level UpdateQueue type and put
the fields directly on the fiber, but since we're keeping UpdateQueue
we can put hasForceUpdate on there.
2016-12-15 16:35:54 -08:00
Andrew Clark 3a946fe094 Use 255 instead of infinity
Infinity is a floating point value.
2016-12-15 09:12:13 -08:00
Andrew Clark 496512f8b8 Update tests to not rely on key iteration order 2016-12-15 09:12:13 -08:00
Andrew Clark e1b733fa83 Move priority context change to findNextUnitOfWork
...rather than changing it on every unit of work.
2016-12-15 09:12:13 -08:00
Andrew Clark df9603ead8 Simplify test for whether we should flush a pending commit
We can just check if the deadline has expired.
2016-12-15 09:12:13 -08:00
Andrew Clark eec431297a Priority context during reconciliation
setState inside render/cWRP should have the same priority as whatever
level is currently being reconciled.
2016-12-15 09:12:13 -08:00
Andrew Clark e0981b8bc5 Handle setState inside an updater function
The update is scheduled as if the current processing update has already
been processed; if it has the same or higher priority, it will be
flushed in the same batch.

We also print a warning.
2016-12-15 09:12:13 -08:00
Andrew Clark babace0c05 Add fast path for appending updates to the end of the queue
This is the most common case, so we should avoid scanning the entire
list to get to the end.
2016-12-15 09:12:13 -08:00
Andrew Clark d7f89b8681 Don't rely on commit phase effect to clear updates
Instead clear updates on the work-in-progress during the begin phase.
Aborted updates are recovered by cloning from the current fiber.
2016-12-15 09:12:12 -08:00
Andrew Clark ead8ab7e2d Add unstable_deferredUpdates
This is needed to get the triangle demo working.
2016-12-15 09:12:12 -08:00
Andrew Clark 20f00045d3 Apply pending updates in order of priority
The queue maintains a pointer to the last progressed update in the list.
Updates that come after that pointer are pending. The pointer is set to
the end of the list during reconciliation.

Pending updates are sorted by priority then insertion. Progressed
updates are sorted by the order in which they were applied during
reconciliation, which may not be by priority: if a component bails out
before the updates are committed, in the next render, the progressed
updates are applied in the same order that they were previously, even if
a higher priority update comes in.

Once a progressed update is flushed/committed, it's removed from
the queue.
2016-12-15 09:12:12 -08:00
Andrew Clark bb844a03b2 Use lastProgressedUpdate pointer instead of firstPendingUpdate
We need to be able to access both, and since the list uses forward
pointers, it makes more sense to point to the one that comes first.
Otherwise to get the last progressed update you have to start at the
beginning of the list.
2016-12-15 09:12:12 -08:00
Andrew Clark 94011e98a6 Separate priority for updates
When resetting the priority in the complete phase, check the priority of
the update queue so that updates aren't dropped.

Updates inside render, child cWRP, etc are no longer dropped.

The next step is sort the queue by priority and only flush updates that
match the current priority level.
2016-12-15 09:12:12 -08:00
Andrew Clark cb1ef03df9 Replace .hasForceUpdate with ForceUpdate effect
Removes another field from the update queue
2016-12-15 09:12:12 -08:00
Andrew Clark 6301086c35 Schedule callback effects while merging updates
This allows us to remove the hasCallback flag.
2016-12-15 09:12:12 -08:00
Andrew Clark cbba5ef9cc Don't drop updates until they are committed
Restructures the update queue to maintain a pointer to the first
pending update, which solves a few problems:

- Updates that occur during the begin phase (e.g. in cWRP of a child)
aren't dropped, like they are currently. This isn't working yet because
the work priority is reset during completion. The following item will
fix it.
- Sets us up to be able to add separate priorities to each update in
the queue. I'll add this in a subsequent commit.
2016-12-15 09:12:12 -08:00
Dan Abramov e36b38c1ca [Fiber] Fix some of the warnings (#8570)
* Implement component stack for some warnings in Fiber

* Keep Fiber debug source up to date

When an element changes, we should copy the source and owner again.
Otherwise they can get stale since we're not reading them from the element.

* Remove outdated TODOs from tests

* Explicitly specify Fiber types to include in the stack

Fixes an accidental omission when both source and owner are null but displayName exists.

* Fix mised Stack+Fiber test to not expect extra warnings

When we're in Fiber mode we don't actually expect that warning being printed.

* Warn on passing different props to super()

* Implement duplicate key warnings

We keep known keys in a set in development. There is an annoying special case where we know we'll check it again because we break out of the loop early.

One test in the tree hook regresses to the failing state because it checks that the tree hook works without a Set available, but we started using Set in this code. It is not essential and we can clean this up later when we decide how to deal with polyfills.

* Move ReactTypeOfWork to src/shared

It needs to be available both to Fiber and Isomorphic because the tree hook lives in Isomorphic but pretty-prints Fiber stack.

* Add dev-only ReactDebugCurrentFiber for warnings

The goal is to use ReactCurrentOwner less and rely on ReactDebugCurrentFiber for warning owner name and stack.

* Make Stack invariant messages more consistent

Fiber used a helper so two tests had the same phrasing.
Stack also used a helper for most invariants but hardcoded a different phrase in one place.
I changed that invariant message to use a helper which made it consistent with what it prints in Fiber.

* Make CSSPropertyOperations use getCurrentFiberOwnerName()

This gets mount-time CSS warnings to be printed.

However update-time warnings are currently ignored because current fiber is not yet available during the commit phase.

We also regress on HostOperation hook tests but this doesn't matter because it's only used by ReactPerf and it doesn't work with Fiber yet anyway. We'll have to think more about it later.

* Set ReactDebugCurrentFiber during the commit phase

This makes it available during updates, fixing the last failing test in CSSPropertyOperations.

* Add DOM warnings by calling hooks directly

It is not clear if the old hook system is worth it in its generic incarnation. For now I am just hooking it up to the DOMFiber renderer directly.

* Add client-side counterparts for some warning tests

This helps us track which warnings are really failing in Fiber, and which ones depend on SSR.
2016-12-15 08:36:58 -08:00
Brian Vaughn ab72f626de Merge pull request #8560 from bvaughn/react-native-fiber
ReactNative fiber renderer
2016-12-14 20:05:17 -08:00
Brian Vaughn 5266ca9312 Added new fiber-based renderer for native dubbed ReactNativeFiber 2016-12-14 18:39:22 -08:00
Ben Alpert ac241972bd mockImpl -> mockImplementation
D4329549
2016-12-14 14:21:51 -08:00
Ben Alpert ba8f24ba99 Prepare new composite child before removing old (#8572)
This matches what we do in Fiber -- and doing it this way is the only way we can prepare new views in the background before unmounting old ones.

In particular, this breaks this pattern:

```js
class Child1 extends React.Component {
  render() { ... }
  componentWillMount() {
    this.props.registerChild(this);
  }
  componentWillUnmount() {
    this.props.unregisterChild();
  }
}

class Child2 extends React.Component {
  render() { ... }
  componentWillMount() {
    this.props.registerChild(this);
  }
  componentWillUnmount() {
    this.props.unregisterChild();
  }
}

class Parent extends React.Component {
  render() {
    return (
      showChild1 ?
        <Child1
          registerChild={(child) => this.registered = child}
          unregisterChild={() => this.registered = null}
        /> :
        <Child2
          registerChild={(child) => this.registered = child}
          unregisterChild={() => this.registered = null}
        />
    );
  }
}
```

Previously, `this.registered` would always be set -- now, after a rerender, `this.registered` gets stuck at null because the old child's componentWillUnmount runs *after* the new child's componentWillMount.

A correct fix here is to use componentDidMount rather than componentWillMount. (In general, componentWillMount should not have side effects.) If Parent stored a list or set of registered children instead, there would also be no issue.
2016-12-14 11:14:50 -08:00
Gaëtan Renaudeau 931cad5aae Fix test renderer unmount (#8512)
* [react-test-renderer] unmount the inner instances

Fixes https://github.com/facebook/react/issues/8459

* add a test for https://github.com/facebook/react/issues/8459

* add new test in tests-passing.txt
2016-12-14 10:57:21 -05:00
Brian Vaughn 3def431543 Merge pull request #8568 from bvaughn/top-level-context-push-pop
HostRoot no longer pops context provider during complete phase
2016-12-13 17:27:47 -08:00
Brian Vaughn b4745ca72b HostRoot no longer pops context provider in complete phase
Also added an invariant warning to guard against context being popped too many times.
2016-12-13 17:26:19 -08:00
Andrew Clark 480e404fc8 Merge pull request #8528 from acdlite/callbacksemantics
Give setState callbacks componentWillUpdate semantics
2016-12-13 17:22:41 -08:00
Andrew Clark 97b7d0eff5 Test top-level callback when re-rendering with same element 2016-12-13 16:28:06 -08:00
Andrew Clark a930f09dfe Give setState callbacks componentWillUpdate semantics
This matches the behavior in Fiber. Normally we would change Fiber
to match Stack to minimize breaking changes for the initial release.
However, in this case it would require too large a compromise to change
Fiber to act like Stack.
2016-12-13 15:50:33 -08:00
Sebastian Markbåge bd425837a4 Merge pull request #8563 from sebmarkbage/enforcelowercasetags
Drop runtime validation and lower case coercion of tag names
2016-12-13 14:54:21 -08:00
Sebastian Markbage 6c1592f384 Pass type to the relevant host config methods
Instead of reading it from the DOM node.
2016-12-13 14:53:36 -08:00
Sebastian Markbage db489a4ade Only do runtime validation of tag names when createElement is not used
We introduced runtime validation of tag names because we used to generate
HTML that was supposed to be inserted into a HTML string which could've
been an XSS attack.

However, these days we use document.createElement in most cases. That
already does its internal validation in the browser which throws. We're now
double validating it. Stack still has a path where innerHTML is used and
we still need it there. However in Fiber we can remove it completely.
2016-12-13 14:53:36 -08:00
Sebastian Markbage 3092f63c6b Warn if upper-case tags are used
In #2756 we ended up using toLowerCase to allow case insensitive HTML tags.
However, this requires extra processing every time we access the tag or
at least we need to process it for mount and store it in an extra field
which wastes memory.

So instead, we can just enforce case sensitivity for HTML since this might
matter for the XML namespaces like SVG anyway.
2016-12-13 14:53:29 -08:00
Ben Alpert ec8b94e847 Disable coverage on PRs on Circle (#8569) 2016-12-13 14:27:25 -08:00
Brian Vaughn 369769aed4 Merge pull request #8558 from bvaughn/rename-initialize-core
Renamed InitializeJavaScriptAppEngine to InitializeCore
2016-12-12 21:32:53 -08:00
Dan Abramov 0f34bdc622 [Fiber] Remove array indirection in host context (#8544)
* Remove array indirection in host context

* Keep a single context stack with a null sentinel

This lets us keep subtrees separated without maintaining independent context arrays for subtrees.

* There is always exactly one null by the time we pop a portal

I was trying to be smart but didn't need to.

* Cache current context
2016-12-12 15:20:40 -08:00
Dan Abramov ef532fd4a4 [Fiber] Fix portal bugs (#8532)
* Enable additional (failing) portal tests

* Fix portal unmounting

When unmount a portal, we need to unmount *its* children from itself.
This is similar to what we would do for a root if we allowed deleting roots.

* Skip portals when looking for host siblings

A portal is not part of that host tree despite being a child.

* Fix comment typo

* Add a failing test for portal child reconciliation

It is failing because portal bails out of update, seeing null in pendingProps.
It is null because we set pendingProps to nextPortal.children, which is null in this test.

* Fix the bug when switching to a null portal child

If pendingProps is null, we do a bailout in beginWork.
This prevents unmounting of the existing child when the new child is null.

We fix this by changing portal fiber's pendingProps to be the portal object itself instead of its children.
This way, it is never null, and thus doesn't cause a false positive in the bailout condition.

* Add a comment about HostPortal in getHostSibling

* Revert the fix because I don't know why it worked

unmountHostComponents() should have worked despite finding the wrong parent because it should have changed the parent when pushing and popping the portals.

* Don't call commitDeletion recursively

This leads to a "Cannot find host parent" bug because commitDeletion() clears the return field.
When we're inside the loop, we assign node.sibling.return to node.return but by this moment node.return has already been nulled.
As a solution we inline code from commitDeletion() without the nulling.

It still fails tests but for a different reason (unrelated bug).

* Skip portal children in commitNestedUnmounts()

We are currently already visiting them in commitUnmount() portal case since it's recursive.
This condition avoids visting them twice.

* Set node.child.return before going deeper

It doesn't seem to influence existing tests but we have this protection in all other similar places.
It protects against infinite loops.

* Revert "Fix the bug when switching to a null portal child"

This reverts commit ed9747deed.

I'll solve this by using an array in place of null instead.

* Use [] for empty Portal pendingProps

This avoids a false positive bailout with pendingProps == null when portal is empty.
2016-12-12 14:18:55 -08:00
Brian Vaughn cdb38c1478 Renamed InitializeJavaScriptAppEngine mock to InitializeCore. 2016-12-12 13:55:58 -08:00
Brian Vaughn 7b7c0e4af5 Renamed InitializeJavaScriptAppEngine to InitializeCore 2016-12-12 11:23:25 -08:00
Brian Vaughn 0a3256ac15 Merge pull request #8557 from bvaughn/add-create-text-instance-param
Add rootContainerInstance param to createTextInstance
2016-12-12 11:20:46 -08:00
Brian Vaughn f8cb22ad83 Add rootContainerInstance param to createTextInstance.
This mirrors a recent change in params passed to  and cleans up a HACK currently required for the native fiber renderer to create text views.
2016-12-12 10:12:43 -08:00
comerc 92665e2cb1 Fix casing typo in jsx-in-depth.md (#8542) 2016-12-11 07:43:40 -06:00
Chris 39695dcd36 update example to use this.state (#8425)
- In the previous example, the code works even without using bind(this) in the constructor.
- the reason being handleClick doesn't even use `this` and its just calling the global function alert.
- this change make use of this via access this.state.
2016-12-11 07:41:48 -06:00
Sebastian Markbåge 14f05bfa89 ReactDOMFiber-test Rename portal -> usePortal (#8535)
Fixes lint since I used portal as a variable name.
We typically use a verb for functions.
2016-12-08 14:22:53 -08:00
Sebastian Markbåge 6c785ed524 Add unit tests for event bubbling in portals (#8509)
These bubble through the portal and up to the parent that rendered
the portal.
2016-12-08 13:51:21 -08:00