Annotate the rest of the Lifecycle methods
This commit is contained in:
parent
910007114c
commit
854d97d4f9
110
README.md
110
README.md
@ -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
|
||||||
@ -15,43 +17,47 @@ Short reference of React.Component lifecycle methods so I don't have to scroll t
|
|||||||
* @param {object} props
|
* @param {object} props
|
||||||
*/
|
*/
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
foo: 'bar'
|
foo: 'bar'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 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
|
||||||
* @return {object | null} - The change to the state
|
* @return {object | null} - The change to the state
|
||||||
*/
|
*/
|
||||||
static getDerivedStateFromProps (nextProps, prevState) {
|
static getDerivedStateFromProps (nextProps, prevState) {
|
||||||
// Nothing to update
|
// Nothing to update
|
||||||
return null;
|
return null;
|
||||||
|
|
||||||
// Set new state
|
// Set new state
|
||||||
return {
|
return {
|
||||||
foo: 'foobar'
|
foo: 'foobar'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### componentDidMount ()
|
#### componentDidMount ()
|
||||||
|
|
||||||
|
`componentDidMount() => void`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
/**
|
/**
|
||||||
* Component mounted, will render soon
|
* Component mounted, will render soon
|
||||||
*/
|
*/
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
// Network calls, state changes,
|
// Network calls, state changes,
|
||||||
// anything is fair game here
|
// anything is fair game here
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -59,6 +65,8 @@ componentDidMount () {
|
|||||||
|
|
||||||
#### shouldComponentUpdate ()
|
#### shouldComponentUpdate ()
|
||||||
|
|
||||||
|
`shouldComponentUpdate (nextProps, nextState) => shouldUpdate (boolean)`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
/**
|
/**
|
||||||
* Hook to control re-render
|
* Hook to control re-render
|
||||||
@ -68,15 +76,18 @@ componentDidMount () {
|
|||||||
* @return {boolean} - Whether to render this cycle
|
* @return {boolean} - Whether to render this cycle
|
||||||
*/
|
*/
|
||||||
shouldComponentUpdate (nextProps, nextState) {
|
shouldComponentUpdate (nextProps, nextState) {
|
||||||
// Default in React.Component
|
// Default in React.Component
|
||||||
return true;
|
return true;
|
||||||
|
|
||||||
// React.PureComponent implements this method
|
// React.PureComponent implements this method
|
||||||
// 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
|
||||||
@ -84,19 +95,43 @@ shouldComponentUpdate (nextProps, nextState) {
|
|||||||
* @return {React Element | string | number | Portal | null | boolean}
|
* @return {React Element | string | number | Portal | null | boolean}
|
||||||
*/
|
*/
|
||||||
render () {
|
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,10 +139,15 @@ 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 ()
|
||||||
### UNSAFE_componentWillUpdate ()
|
|
||||||
|
`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