Higher order functions
Higher-order functions have two characteristics before we look at higher-order components:
- Functions can be passed as arguments
setTimeout(() => {
console.log(123);
}, 1000);
Copy the code- The function can be output as a return value
function foo(x) {
return function() {
returnx; }}Copy the codeYou can see what a higher-order function is by looking at these two examples. In fact, there are many application scenarios of higher-order functions. Time functions such as setTimeout and setInterval, as well as some methods (map, some, filter) that we are familiar with to operate arrays are also higher-order functions.
High Order Component (HOC)
A higher-order component is a function that takes a component as an argument and returns a new component. Note: A higher-order component is a function, not a component
Third, the implementation of higher-order components
example
Steps:
- The React project directory structure is as follows:
- The Components folder holds our components
A.js
import React, { Component } from 'react';
export default class A extends Component {
render() {
return (
<div className="box">
<header className="head"> Header </header> <div className="content">
</div>
</div>
)
}
}
Copy the code- Mount the A component to the page,
App.js
import React from 'react';
import A from './components/A';
import './index.css';
class App extends React.Component {
render() {
return(
<div className="out-box">
<A />
</div>
)
}
}
export default App;
Copy the codeAfter starting the project, the page looks like this:
- After the rewrite
A.js
import React, { Component } from 'react'; // The hocA function takes a component argumentfunction hocA(Wrapper) {
return class A extends Component {
render() {
return (
<div className="box">
<header className="head"> Header </header> <div className="content"> {/ * components can be mounted to the corresponding position * /} < Wrapper / > < / div > < / div >)}}};export default hocA;
Copy the codeSo now component A is A higher-order component, so how do you use it? Easy
B.js
import React, { Component } from 'react'; // Import hocA from'./A';
class B extends Component {
render() {
return(<div> this is the B component </div>)}} // Just pass the component as an argument to the higher-order componentexport default hocA(B);
Copy the codeThe same is true for C.js. After rewriting, mount components B and C to the page
App.js
import React from 'react';
import B from './components/B';
import C from './components/C';
import './index.css';
class App extends React.Component {
render() {
return(
<div className="out-box">
<B />
<C />
</div>
)
}
}
export default App;
Copy the code- Start the project
Decorator syntax to use higher-order components
Here is the second way to use higher-order components, using a decorator: @higher-order component names. However, the React project does not support decorator syntax by default, so we need to install a plug-in and modify the configuration.
- The React project configuration file is exposed:
npm run eject - Install plug-in:
yarn add @babel/plugin-proposal-decorators -D - Modify Babel configuration in package.json:
"babel": {
"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true}]],"presets": [
"react-app"]},Copy the code- Modify the use method:
B.js
import React, { Component } from 'react'; // Import hocA from'./A'; // The decorator syntax uses @hoca class B extends Component {render() {
return(<div> this is the B component </div>)}} // export the component directlyexport default B;
Copy the codeThe same is true for C. Js. Restart the project as before.
At this point, a simple higher-order component is implemented. So the reason why we need higher-order components is that when multiple components need the same function, using higher-order components can reduce duplication of implementation.