1
0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 15:18:01 +00:00

Add Access The Latest Lifecycle Methods In An Old App as a react til

This commit is contained in:
jbranchaud
2018-04-10 12:34:11 -05:00
parent 8430b33e6e
commit 2d65e8fe1d
2 changed files with 35 additions and 1 deletions

View File

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
For a steady stream of TILs from a variety of rocketeers, checkout
[til.hashrocket.com](https://til.hashrocket.com/).
_660 TILs and counting..._
_661 TILs and counting..._
---
@@ -449,6 +449,7 @@ _660 TILs and counting..._
### React
- [A Component Is Just A Bag Of Data](react/a-component-is-just-a-bag-of-data.md)
- [Access The Latest Lifecycle Methods In An Old App](react/access-the-latest-lifecycle-methods-in-an-old-app.md)
- [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md)
- [Alter The Display Name Of A Component](react/alter-the-display-name-of-a-component.md)
- [Building A React App In The Browser](react/building-a-react-app-in-the-browser.md)

View File

@@ -0,0 +1,33 @@
# Access The Latest Lifecycle Methods In An Old App
With the release of React 16.3 we have access to some new lifecycle methods
and are in the first phase of what will eventually result in the deprecation
and removal of `componentWillMount`, `componentWillReceiveProps`, and
`componentWillUpdate`.
You may not be ready to move your project to React 16.3, but that doesn't
mean you can't start migrating your lifecycle methods now. We'll need a
polyfill --
[react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat).
```javascript
import React from 'react';
import { pollyfill } from 'react-lifecycles-compat';
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
// ...
}
render() { ... }
}
polyfill(MyComponent)
export default MyComponent;
```
For any of our class components for which we'd like to start using the new
lifecycle methods, we just need to import the polyfill function and then
transform the class component with the polyfill before exporting it.
[source](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#open-source-project-maintainers)