Annotate the rest of the Lifecycle methods

This commit is contained in:
Timothy Warren 2018-04-06 20:35:49 -04:00
parent 910007114c
commit 854d97d4f9

110
README.md
View File

@ -8,6 +8,8 @@ Short reference of React.Component lifecycle methods so I don't have to scroll t
#### constructor ()
`constructor () => void`
```js
/**
* Create state and call super
@ -15,43 +17,47 @@ Short reference of React.Component lifecycle methods so I don't have to scroll t
* @param {object} props
*/
constructor (props) {
super(props);
this.state = {
foo: 'bar'
}
super(props);
this.state = {
foo: 'bar'
}
}
```
#### static getDerivedStateFromProps ()
`static getDerivedStateFromProps (nextProps, prevState) => nextState`
```js
/**
* Props have changed, return the updated state
* Props have changed, return the updated state or null
*
* @param {object} nextProps - Props for the next render
* @param {object} prevState - State from previous render
* @return {object | null} - The change to the state
*/
static getDerivedStateFromProps (nextProps, prevState) {
// Nothing to update
return null;
// Set new state
return {
foo: 'foobar'
};
// Nothing to update
return null;
// Set new state
return {
foo: 'foobar'
};
}
```
#### componentDidMount ()
`componentDidMount() => void`
```js
/**
* Component mounted, will render soon
*/
componentDidMount () {
// Network calls, state changes,
// anything is fair game here
// Network calls, state changes,
// anything is fair game here
}
```
@ -59,6 +65,8 @@ componentDidMount () {
#### shouldComponentUpdate ()
`shouldComponentUpdate (nextProps, nextState) => shouldUpdate (boolean)`
```js
/**
* Hook to control re-render
@ -68,15 +76,18 @@ componentDidMount () {
* @return {boolean} - Whether to render this cycle
*/
shouldComponentUpdate (nextProps, nextState) {
// Default in React.Component
return true;
// React.PureComponent implements this method
// with a shallow compare of props and state
// Default in React.Component
return true;
// React.PureComponent implements this method
// with a shallow compare of props and state
}
```
#### render ()
`render () => JSX`
```js
/**
* Render returned components
@ -84,19 +95,43 @@ shouldComponentUpdate (nextProps, nextState) {
* @return {React Element | string | number | Portal | null | boolean}
*/
render () {
return <div />;
return <div />;
}
```
#### getSnapshotBeforeUpdate ()
```js
getSnapshotBeforeUpdate (prevProps, prevState) {
}
```
#### componentDidUpdate ()
`getSnapshotBeforeUpdate (prevProps, prevState) => any`
```js
/**
* Get/set DOM values. Return value is passed to componentDidUpdate
*
* @param {object} prevProps
* @param {object} prevState
* @return {any}
*/
getSnapshotBeforeUpdate (prevProps, prevState) {
return {
bar: 'foo'
};
}
```
#### componentDidUpdate ()
`componentDidUpdate (prevProps, prevState, snapshot) => void`
```js
/**
* The component updated, do stuff before the next cycle, like network requests
*
* @param {object} prevProps
* @param {object} prevState
* @param {any | undefined} snapshot - output from getSnapshotBeforeUpdate
*/
componentDidUpdate (prevProps, prevState, snapshot = undefined) {
// Best place to do actions depending on previous props and state
}
```
@ -104,10 +139,15 @@ componentDidUpdate (prevProps, prevState, snapshot = undefined) {
#### componentWillUnmount ()
`componentWillUnmount () => void`
```js
/**
* Teardown stuff
*/
componentWillUnMount () {
// Cleanup whatever you need to before the
// component unmounts
// Cleanup whatever you need to before the
// component unmounts
}
```
@ -115,5 +155,19 @@ componentWillUnMount () {
## Deprecated
### UNSAFE_componentWillMount ()
`componentWillMount () => void`
Use [`componentDidMount ()`](#componentdidmount-) instead.
### UNSAFE_componentWillReceiveProps ()
### UNSAFE_componentWillUpdate ()
`componentWillRecieveProps (newProps) => void`
Use [`static getDerivedStateFromProps ()`](#static-getderivedstatefromprops-) instead.
### UNSAFE_componentWillUpdate ()
`componentWillUpdate (nextProps, nextState) => void`
Use [`componentDidUpdate ()`](#componentdidupdate-) instead.