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

View File

@ -8,6 +8,8 @@ Short reference of React.Component lifecycle methods so I don't have to scroll t
#### constructor () #### constructor ()
`constructor () => void`
```js ```js
/** /**
* Create state and call super * Create state and call super
@ -24,9 +26,11 @@ constructor (props) {
#### static getDerivedStateFromProps () #### static getDerivedStateFromProps ()
`static getDerivedStateFromProps (nextProps, prevState) => nextState`
```js ```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} nextProps - Props for the next render
* @param {object} prevState - State from previous render * @param {object} prevState - State from previous render
@ -45,6 +49,8 @@ static getDerivedStateFromProps (nextProps, prevState) {
#### componentDidMount () #### componentDidMount ()
`componentDidMount() => void`
```js ```js
/** /**
* Component mounted, will render soon * Component mounted, will render soon
@ -59,6 +65,8 @@ componentDidMount () {
#### shouldComponentUpdate () #### shouldComponentUpdate ()
`shouldComponentUpdate (nextProps, nextState) => shouldUpdate (boolean)`
```js ```js
/** /**
* Hook to control re-render * Hook to control re-render
@ -75,8 +83,11 @@ shouldComponentUpdate (nextProps, nextState) {
// with a shallow compare of props and state // with a shallow compare of props and state
} }
``` ```
#### render () #### render ()
`render () => JSX`
```js ```js
/** /**
* Render returned components * Render returned components
@ -87,16 +98,40 @@ render () {
return <div />; return <div />;
} }
``` ```
#### getSnapshotBeforeUpdate () #### getSnapshotBeforeUpdate ()
```js `getSnapshotBeforeUpdate (prevProps, prevState) => any`
getSnapshotBeforeUpdate (prevProps, prevState) {
}
```
#### componentDidUpdate ()
```js ```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) { componentDidUpdate (prevProps, prevState, snapshot = undefined) {
// Best place to do actions depending on previous props and state
} }
``` ```
@ -104,7 +139,12 @@ componentDidUpdate (prevProps, prevState, snapshot = undefined) {
#### componentWillUnmount () #### componentWillUnmount ()
`componentWillUnmount () => void`
```js ```js
/**
* Teardown stuff
*/
componentWillUnMount () { componentWillUnMount () {
// Cleanup whatever you need to before the // Cleanup whatever you need to before the
// component unmounts // component unmounts
@ -115,5 +155,19 @@ componentWillUnMount () {
## Deprecated ## Deprecated
### UNSAFE_componentWillMount () ### UNSAFE_componentWillMount ()
`componentWillMount () => void`
Use [`componentDidMount ()`](#componentdidmount-) instead.
### UNSAFE_componentWillReceiveProps () ### UNSAFE_componentWillReceiveProps ()
`componentWillRecieveProps (newProps) => void`
Use [`static getDerivedStateFromProps ()`](#static-getderivedstatefromprops-) instead.
### UNSAFE_componentWillUpdate () ### UNSAFE_componentWillUpdate ()
`componentWillUpdate (nextProps, nextState) => void`
Use [`componentDidUpdate ()`](#componentdidupdate-) instead.