amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update legacy lifecycle methods (#2435)

Browse Source 
* Update legacy lifecycle methods

componentWillReceiveProps -> componentDidUpdate

* Update legacy lifecycle methods

componentWillReceiveProps -> componentDidUpdate

* Update higher-order-components.md

Co-authored-by: Sunil Pai <threepointone@oculus.com>
This commit is contained in:
Tom Beckenhauer
2020-03-09 09:16:24 -04:00
committed by GitHub
parent 5f594efaf8
commit e3a6479989
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
content/docs/higher-order-components.md
View File

@@ -177,9 +177,9 @@ Resist the temptation to modify a component's prototype (or otherwise mutate it)
```js
function logProps(InputComponent) {
InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
InputComponent.prototype.componentDidUpdate = function(prevProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
console.log('Previous props: ', prevProps);
};
// The fact that we're returning the original input is a hint that it has
// been mutated.
@@ -190,7 +190,7 @@ function logProps(InputComponent) {
const EnhancedComponent = logProps(InputComponent);
```
There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentDidUpdate`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
Mutating HOCs are a leaky abstraction—the consumer must know how they are implemented in order to avoid conflicts with other HOCs.
@@ -199,9 +199,9 @@ Instead of mutation, HOCs should use composition, by wrapping the input componen
```js
function logProps(WrappedComponent) {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
componentDidUpdate(prevProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
console.log('Previous props: ', prevProps);
}
render() {
// Wraps the input component in a container, without mutating it. Good!