component transforms props into UI, HOC transforms component into another component.
const EnhancedComponent = HigherOrderComponent(WrappedComponent)
HOC is a function that takes a component and returns a new component
A higher order component (HOC), is an advanced pattern that emerges from React’s compositional nature.
Higher-order components
In a previous lesson, you learned about Higher-order components (HOC) as a pattern to abstract shared behavior, as well as a basic example of an implementation.
Let's dive deeper to illustrate some of the best practices and caveats regarding HOCs.
These include never mutating a component inside a HOC, passing unrelated props to your wrapped component, and maximizing composability by leveraging the Component => Component signature.
Don’t mutate the original component
One of the possible temptations is to modify the component that is provided as an argument, or in other words, mutate it. That's because JavaScript allows you to perform such operations, and in some cases, it seems the most straightforward and quickest path. Remember that React promotes immutability in all scenarios. So instead, use composition and turn the HOC into a pure function that does not alter the argument it receives, always returning a new component.
const HOC = (WrappedComponent) => {
// Don't do this and mutate the original component
WrappedComponent = () => {
};
…
}
Pass unrelated props through to the Wrapped Component
HOC adds features to a component. In other words, it enhances it. That's why they shouldn't drastically alter their original contract. Instead, the component returned from a HOC is expected to have a similar interface to the wrapped component.
HOCs should spread and pass through all the props that are unrelated to their specific concern, helping ensure that HOCs are as flexible and reusable as possible, as demonstrated in the example below:
const withMousePosition = (WrappedComponent) => {
const injectedProp = {mousePosition: {x: 10, y: 10}};
return (originalProps) => {
return <WrappedComponent injectedProp={injectedProp} {...originalProps} />;
};
};
Maximize composability
So far, you have learned that the primary signature of a HOC is a function that accepts a React component and returns a new component.
Sometimes, HOCs can accept additional arguments that act as extra configuration determining the type of enhancement the component receives.
const EnhancedComponent = HOC(WrappedComponent, config)
The most common signature for HOCs uses a functional programming pattern called "currying" to maximize function composition. This signature is used extensively in React libraries, such as React Redux, which is a popular library for managing state in React applications.
const EnhancedComponent = connect(selector, actions)(WrappedComponent);
This syntax may seem strange initially, but if you break down what's happening separately, it would be easier to understand.
const HOC = connect(selector, actions);
const EnhancedComponent = HOC(WrappedComponent);
connect is a function that returns a higher-order component, presenting a valuable property for composing several HOCs together.
Single-argument HOCs like the ones you have explored so far, or the one returned by the connect function has the signature Component => Component. It turns out that functions whose output type is the same as its input type are really easy to compose together.
const enhance = compose(
// These are both single-argument HOCs
withMousePosition,
withURLLocation,
connect(selector)
);
// Enhance is a HOC
const EnhancedComponent = enhance(WrappedComponent);
Many third-party libraries already provide an implementation of the compose utility function, like lodash, Redux, and Ramda. Its signature is as follows:
compose(f, g, h) is the same as (...args) => f(g(h(...args)))
Caveats
Higher-order components come with a few caveats that aren’t immediately obvious.
1.Don't use HOCs inside other components: always create your enhanced components outside any component scope. Otherwise, if you do so inside the body of other components and a re-render occurs, the enhanced component will be different. That forces React to remount it instead of just updating it. As a result, the component and its children would lose their previous state.
const Component = (props) => {
// This is wrong. Never do this
const EnhancedComponent = HOC(WrappedComponent);
return <EnhancedComponent />;
};
// This is the correct way
const EnhancedComponent = HOC(WrappedComponent);
const Component = (props) => {
return <EnhancedComponent />;
};
2.Refs aren’t passed through: since React refs are not props, they are handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component. To solve this, you can use the React.forwardRef API. You can learn more about this API and its use cases in the additional resources section from this lesson.
Conclusion
And in summary, you have examined higher-order components in more detail. The main takeaways are never mutating a component inside a HOC and passing unrelated props to your wrapped component.
You also learned how to maximize composability by leveraging the Component => Component signature and addressed some caveats about HOC.
A pattern for when we find ourselves repeating logic across components.
When to use? When you’re repeating patterns/logic across components.
Examples
-hooking into/subscribing to a data source
-adding interactivity to UI (also achieved with wrapper/render props)
-sorting/filtering input data
https://codeburst.io/higher-order-components-in-3-minutes-93173b2ebe52
Observations
HOC is a powerful concept that is used to enhance a component with new functions or data. It is worth noting the following:
We don’t modify or mutate the component. We create new ones.
A HOC is used to compose components for code reuse.
A HOC is a pure function. That means it has no side effects. It only returns a new component.
Creating a Higher Order Component
Creating a higher order component basically involves manipulating WrappedComponent which can be done in two ways:
-Props Proxy
-Inheritance Inversion
Props Proxy can be implemented thus:
function ppHOC(WrappedComponent){
return class PP extends React.Component{
render(){return<WrappedComponent{...this.props}/>}
}
}
Notice how the render method of the higher order component returns a React Element which is exactly the type of the WrappedComponent. Asides that, the props received by the higher order component is also passed through hence the name Props Proxy. Props Proxy can be implemented via a number of ways which include but are not limited to:
Manipulating props
Abstracting State
Accessing the instance via Refs
Inheritance Inversion is a bit different. It allows higher order components to access the WrappedComponent instance via the this keyword, this implies that it can access props, state and render methods. Here’s how Inheritance Inversion is implemented:
function iiHOC(WrappedComponent){
return class Enhancer extends WrappedComponent{
render(){
return super.render()
}
}
}
Notice how the returned higher order component class (Enhancer) extends WrappedComponent and not the other way round (WrappedComponent extending the Enhancer class)? The bond between both seems reversed thus the name Inheritance Inversion. Inheritance Inversion can be used in:
Conditional Rendering
State Manipulation
https://scotch.io/courses/5-essential-react-concepts-to-know-before-learning-redux/higher-order-components-in-react
Higher-Order Components are not part of the React API. They are the pattern that emerges from React’s compositional nature. The component transforms props into UI, and a higher-order component converts a component into another component. The examples of HOCs are Redux’s connect and Relay’s createContainer.
Here are some examples of real-world HOCs you might have come across:
react-redux connect(mapStateToProps, mapDispatchToProps)(UserPage)
react-router withRouter(UserPage)
material-ui withStyles(styles)(UserPage)
https://www.smashingmagazine.com/2020/06/higher-order-components-react/
use cases for HOCs
Show a loader while a component waits for data
CONDITIONALLY RENDER COMPONENTS
PROVIDE COMPONENTS WITH SPECIFIC STYLING
PROVIDE A COMPONENT WITH ANY PROP YOU WANT
Structure Of A Higher-Order Component
A HOC is structured like a higher-order function:
-It is a component.
-It takes another component as an argument.
-Then, it returns a new component.
-The component it returns can render the original component that was passed to it.
https://www.sitepoint.com/react-higher-order-components/
Higher-order Component Creators
// HOC.js
import React, {Component} from 'react';
export default function Hoc(HocComponent){
return class extends Component{
render(){
return (
);
}
}
}
// App.js
import React, { Component } from 'react';
import Hoc from './HOC';
class App extends Component{
render() {
return (Higher-Order Component Tutorial)
}
}
App = Hoc(App);
export default App;
Higher Order Components are usually implemented as methods which returns you a customized class and not an instantiated one
The snippet below shows how a HOC is structured in React:
import React from'react';
// Take in a component as argument WrappedComponent
const higherOrderComponent=(WrappedComponent)=>{
// And return another component
class HOC extends React.Component{
render(){
return<WrappedComponent/>;
}
}
return HOC;
};
We can see that higherOrderComponent takes a component (WrappedComponent) and returns another component inside of it. With this technique, whenever we need to reuse a particular component’s logic for something, we can create a HOC out of that component and use it wherever we like.
高阶组件的缺点
怎么解决高阶组件性能问题
