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
1 changed files with 82 additions and 28 deletions

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 ()
`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.