Browse Source

Use examples without types in the post (#719)

main
Dan Abramov 7 years ago
committed by GitHub
parent
commit
77dae36663
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 10
      content/blog/2018-03-27-update-on-async-rendering.md
  2. 5
      examples/update-on-async-rendering/definition-getderivedstatefromprops.js
  3. 5
      examples/update-on-async-rendering/definition-getsnapshotbeforeupdate.js
  4. 19
      examples/update-on-async-rendering/new-lifecycles-overview.js

10
content/blog/2018-03-27-update-on-async-rendering.md

@ -33,22 +33,26 @@ If you'd like to start using the new component APIs introduced in React 16.3 (or
Before we begin, here's a quick overview of the lifecycle changes planned for version 16.3:
* We are **adding the following lifecycle aliases**: `UNSAFE_componentWillMount`, `UNSAFE_componentWillReceiveProps`, and `UNSAFE_componentWillUpdate`. (Both the old lifecycle names and the new aliases will be supported.)
* We are **introducing two new lifecycles**, static `getDerivedStateFromProps` and `getSnapshotBeforeUpdate`:
`embed:update-on-async-rendering/new-lifecycles-overview.js`
* We are **introducing two new lifecycles**, static `getDerivedStateFromProps` and `getSnapshotBeforeUpdate`.
### New lifecycle: `getDerivedStateFromProps`
`embed:update-on-async-rendering/definition-getderivedstatefromprops.js`
The new static `getDerivedStateFromProps` lifecycle is invoked after a component is instantiated as well as when it receives new props. It can return an object to update `state`, or `null` to indicate that the new `props` do not require any `state` updates.
Together with `componentDidUpdate`, this new lifecycle should cover all use cases for the legacy `componentWillReceiveProps`.
### New lifecycle: `getSnapshotBeforeUpdate`
`embed:update-on-async-rendering/definition-getsnapshotbeforeupdate.js`
The new `getSnapshotBeforeUpdate` lifecycle is called right before mutations are made (e.g. before the DOM is updated). The return value for this lifecycle will be passed as the third parameter to `componentDidUpdate`. (This lifecycle isn't often needed, but can be useful in cases like manually preserving scroll position during rerenders.)
Together with `componentDidUpdate`, this new lifecycle should cover all use cases for the legacy `componentWillUpdate`.
You can find their type signatures [in this gist](https://gist.github.com/gaearon/88634d27abbc4feeb40a698f760f3264).
We'll look at examples of how both of these lifecycles can be used below.
## Examples

5
examples/update-on-async-rendering/definition-getderivedstatefromprops.js

@ -0,0 +1,5 @@
class Example extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
// ...
}
}

5
examples/update-on-async-rendering/definition-getsnapshotbeforeupdate.js

@ -0,0 +1,5 @@
class Example extends React.Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
// ...
}
}

19
examples/update-on-async-rendering/new-lifecycles-overview.js

@ -1,19 +0,0 @@
class Example extends React.Component<
Props,
State,
Snapshot
> {
static getDerivedStateFromProps(
nextProps: Props,
prevState: State
): $Shape<State> | null {
// ...
}
getSnapshotBeforeUpdate(
prevProps: Props,
prevState: State
): Snapshot {
// ...
}
}
Loading…
Cancel
Save