As reported in #7227, unmounting performance regressed with React 15.
It seems that `delete` has become much slower since we started using numeric keys.
Forcing dictionary keys to start with a dot fixes the issue.
* Add failing test demonstrating a ReactPerf warning
* Make the failing ReactPerf test more precise
* Make ReactPerf.start() work during reconciliation
* Reorder lifecycle methods for greater clarity
* Fix memory leak
* Error boundaries should not break ReactPerf
* Put onBeginFlush/onEndFlush into transaction wrappers
This looks cleaner even though it is not strictly necessary.
We still call them manually for unmounting because it doesn't have a transaction.
This provides an easy way to indicate that components should only rerender when given new props, like PureRenderMixin. If you rely on mutation in your React components, you can continue to use `React.Component`.
Inheriting from `React.PureComponent` indicates to React that your component doesn't need to rerender when the props are unchanged. We'll compare the old and new props before each render and short-circuit if they're unchanged. It's like an automatic shouldComponentUpdate.
* Add failing tests for #7187 and #7190
* Pass shouldHaveDebugID flag to instantiateComponent
This allows us to remove a hack that was added in #6770 and caused #7187 and #7190.
* Move logic for choosing whether to use debugID outside instantiate
Touch behavior is inconsistent across different platforms, and ResponderTouchHistoryStore currently fatals when assumptions are broken. In addition, the behavior differs between development and production.
This pull request does a few things to make ResponderTouchHistoryStore easier to deal with:
Adds Flow to keep the TouchEvent, Touch, and TouchRecord types straight.
Changes behavior to be consistent across environments. This means either always throwing or never throwing (and making use of warning and console.error as appropriate).
When an orphaned move or end event is received, print debug information and ignore it instead of crashing and burning.
* Warn if PropType function is called in production
* Check if console is undefined before warning
* Randomize value of ReactPropTypesSecret
* Remove dev environment tests
* Rename typeCheckPass to productionWarningCheck
* Rename productionWarningCheck to expectWarningInProduction
* Call toString on Math.random()
* Rename test block for React type checks
* Make sure warning isnt emitted for failing props
* Cache warning by component and prop, warn in dev
* Pass ReactPropTypesSecret to internal checks
* Move tests to ReactPropTypes-test.js
* Update the warning message to include link
* Do not test warning for unions with invalid args
Summary:
I had to cast into any because flow doesn't think that checking the lowercase version of nodeName is a valid way to refine the variable from HTMLElement to HTMLInputElement. I'm also not confident enough in changing the implementation to an instanceof HTMLInputElement to please flow. It also takes care of the null check in the process.
The `nodeName &&` condition wasn't useful since the two branches are checking it against concrete values and actually makes the type different since nodeName is not a boolean per se. I replaced them with if conditions to make it clearer what it actually did instead of doing boolean logic tricks.
It is unclear why I had to type supportedInputTypes, see this internal post for a discussion: https://www.facebook.com/groups/flowtype/permalink/1084168611631753/
The only difference in behavior is that I now explicitely convert to boolean the object dereference via `!!`.
Test Plan:
npm run flow
Careful inspection of the code
Reviewers: @zpao @spicyj
* Inline dev-only requires
This reduces the production bundled build size.
* Use new references after resetting module registry in tests
This fixes the tests which were broken due to inlining some requires.
This commit fixes#5473: ReactDOMServer.renderToString: presence of onClick
handler causes errors on async update
This commit performs the following changes:
- Adds a getUpdateQueue method to ReactServerRenderingTransaction,
ReactReconcileTransaction, ReactNativeReconcileTransaction and
ReactTestReconcileTransaction
- Make the ReactCompositeComponent call this getUpdateQueue instead of using
ReactUpdateQueue that was unwanted at certain moments on server
- On ReactServerRenderingTransaction, dispatch ReactUpdateQueue's methods
while rendering and warning methods afterwards. This is done through the new
ReactServerUpdateQueue class
- Added a series of tests that mimics the case presented in #5473 with setState,
forceUpdate and replaceState
- Add flow typechecking on concerned files
- Removed the prop transitionAppearTimeout from
addons/transitions/ReactTransitionGroup in order to remove a warning
when passing unknown props to DOM elements.
This is only for host nodes so that the DOM tree is fully updated
by the time we've flushed.
Classes will schedule their life-cycles *after* their children's
side-effects.
This creates a new API for processing side-effects on the host
environment.
During initial reconciliation host instances are created during
the time sliced periods.
During updates there is an opportunity for the host
to prepare something on the instance during the time slicing, and
to determine whether there were any changes. The could be thrown
away.
At the commit phase, these changes are finally committed to the
host instance.
This adds tracking of side-effects that gets scheduled during an
update.
As the tree gets reconciled, the side-effectful fibers are linked
together in an ordered singly linked list. That way we can walk
the linked list to commit only the work that needs to be
synchronous - quickly.
We also store first and last nodes within a fiber. That
way when we reuse an already processed subtree, we can reuse that
subset of the linked list.
This is not just the parent Instance but also the return Fiber for
some piece of work. This clarifies and buys into this definition.
Basically, in the current model you will always pass into a fiber
from the parent that you're going to return to. Even if you get
aborted and reused this will be updated to the correct return
fiber before you get back here.
I don't have any guarantees in place to enforce this right now. I
don't really know how to, but seems safe. :)
I confirmed that the use of keyword properties work for old
engines because we have the transform enabled in our build system.
This tries to reuse work that was completed but another higher
priority event came in. This tries to avoid starvation when high
priority events causes low pri work to keep rerendering from
scratch.
First I fix a bug where host components didn't properly bail out
although this was unobservable.
When we bail out, we need to ensure that we preserve the highest
remaining priority work that is left to do for that subtree.
This still isn't properly handling the case when that work has the
*same* priority as the current one. That work will be flushed the
*next* tick instead of the current pass.
I can't create a test for that yet since I need setState to get to
that state.
This fixes some bugs with the clones and traversing backwards
through them. It is important that we maintain the correct parent
at all times and that clones have the correct values.
We need to carefully clone everything on the way up to the the
fiber with the next work to do.
This code is a bit messy and fragile now. I'm sure I didn't get it
all right but I want to get the basics in place first. Then we can
structure this part better. I think the general algorithm is sound
though.
We need a canonical stateful root for each. I don't really want to
overload the HostContainer for this purpose since it makes the
fiber code more specialized.
Instead I create a root which represents an actual stateful root.
When these get scheduled they get chained together in a linked
list. However, we don't hold onto anything that doesn't have
scheduled work. This will help us release everything automatically
in the GC, as long as there are no subscriptions nor scheduled
work.
This is a bit poorly structured. I'll restructure when the pieces
are better in place.
Basically we reset the priority of a node before work on the
children. The children then bump their parent if they end up
having work left.
This is the first time we're seeing deep updates happening. The
new unit test demonstrates this.
There is an interesting case that happens when we fall back out of
a deep update. We end up "completing" a node that we didn't begin.
This probably breaks in coroutines. When that completes, it'll try
to render the sibling next but that should bail out so we check
for any pending work on the sibling. That one I'm not sure about.
This is essentially equivalent to the current top level wrappers.
They contain the next children to be mounted into a container node
from the host.
It is the responsibility of the host to retain references to them
for updates.
I expect them to be able to exist in the middle of the tree in
the future, for renderSubtreeIntoContainer.
This flag on fibers will be used to track what priority of work is
needed by that subtree, if any at all.
Also fix up the TypeOfWork to have consistent naming and typing.
