Browse Source

Merge pull request #910 from bvaughn/rename-gdsfp-params

Renamed gDSFP params
main
Brian Vaughn 7 years ago
committed by GitHub
parent
commit
db71d03183
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      content/docs/reference-react-component.md
  2. 2
      examples/update-on-async-rendering/definition-getderivedstatefromprops.js
  3. 6
      examples/update-on-async-rendering/updating-external-data-when-props-change-after.js
  4. 11
      examples/update-on-async-rendering/updating-state-from-props-after.js
  5. 2
      examples/update-on-async-rendering/using-react-lifecycles-compat.js

2
content/docs/reference-react-component.md

@ -186,7 +186,7 @@ If you "fork" props by using them for state, you might also want to implement [`
### `static getDerivedStateFromProps()` ### `static getDerivedStateFromProps()`
```js ```js
static getDerivedStateFromProps(nextProps, prevState) static getDerivedStateFromProps(props, state)
``` ```
`getDerivedStateFromProps` is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing. `getDerivedStateFromProps` is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

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

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

6
examples/update-on-async-rendering/updating-external-data-when-props-change-after.js

@ -5,13 +5,13 @@ class ExampleComponent extends React.Component {
}; };
// highlight-range{1-13} // highlight-range{1-13}
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(props, state) {
// Store prevId in state so we can compare when props change. // Store prevId in state so we can compare when props change.
// Clear out previously-loaded data (so we don't render stale stuff). // Clear out previously-loaded data (so we don't render stale stuff).
if (nextProps.id !== prevState.prevId) { if (props.id !== state.prevId) {
return { return {
externalData: null, externalData: null,
prevId: nextProps.id, prevId: props.id,
}; };
} }

11
examples/update-on-async-rendering/updating-state-from-props-after.js

@ -8,13 +8,12 @@ class ExampleComponent extends React.Component {
lastRow: null, lastRow: null,
}; };
// highlight-range{1-8} // highlight-range{1-7}
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(props, state) {
if (nextProps.currentRow !== prevState.lastRow) { if (props.currentRow !== state.lastRow) {
return { return {
isScrollingDown: isScrollingDown: props.currentRow > state.lastRow,
nextProps.currentRow > prevState.lastRow, lastRow: props.currentRow,
lastRow: nextProps.currentRow,
}; };
} }

2
examples/update-on-async-rendering/using-react-lifecycles-compat.js

@ -4,7 +4,7 @@ import {polyfill} from 'react-lifecycles-compat';
class ExampleComponent extends React.Component { class ExampleComponent extends React.Component {
// highlight-next-line // highlight-next-line
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(props, state) {
// Your state update logic here ... // Your state update logic here ...
} }
} }

Loading…
Cancel
Save