Annotate the rest of the Lifecycle methods
This commit is contained in:
parent
910007114c
commit
854d97d4f9
66
README.md
66
README.md
@ -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
|
||||
@ -24,9 +26,11 @@ constructor (props) {
|
||||
|
||||
#### 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
|
||||
@ -45,6 +49,8 @@ static getDerivedStateFromProps (nextProps, prevState) {
|
||||
|
||||
#### componentDidMount ()
|
||||
|
||||
`componentDidMount() => void`
|
||||
|
||||
```js
|
||||
/**
|
||||
* Component mounted, will render soon
|
||||
@ -59,6 +65,8 @@ componentDidMount () {
|
||||
|
||||
#### shouldComponentUpdate ()
|
||||
|
||||
`shouldComponentUpdate (nextProps, nextState) => shouldUpdate (boolean)`
|
||||
|
||||
```js
|
||||
/**
|
||||
* Hook to control re-render
|
||||
@ -75,8 +83,11 @@ shouldComponentUpdate (nextProps, nextState) {
|
||||
// with a shallow compare of props and state
|
||||
}
|
||||
```
|
||||
|
||||
#### render ()
|
||||
|
||||
`render () => JSX`
|
||||
|
||||
```js
|
||||
/**
|
||||
* Render returned components
|
||||
@ -87,16 +98,40 @@ render () {
|
||||
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,7 +139,12 @@ componentDidUpdate (prevProps, prevState, snapshot = undefined) {
|
||||
|
||||
#### componentWillUnmount ()
|
||||
|
||||
`componentWillUnmount () => void`
|
||||
|
||||
```js
|
||||
/**
|
||||
* Teardown stuff
|
||||
*/
|
||||
componentWillUnMount () {
|
||||
// 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 ()
|
||||
|
||||
`componentWillRecieveProps (newProps) => void`
|
||||
|
||||
Use [`static getDerivedStateFromProps ()`](#static-getderivedstatefromprops-) instead.
|
||||
|
||||
### UNSAFE_componentWillUpdate ()
|
||||
|
||||
`componentWillUpdate (nextProps, nextState) => void`
|
||||
|
||||
Use [`componentDidUpdate ()`](#componentdidupdate-) instead.
|
Loading…
Reference in New Issue
Block a user