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:
@@ -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)
|
||||
|
||||
33
react/access-the-latest-lifecycle-methods-in-an-old-app.md
Normal file
33
react/access-the-latest-lifecycle-methods-in-an-old-app.md
Normal 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)
|
||||
Reference in New Issue
Block a user