HoC - Higher Order Components

HoF - Higher Order Functions

 // Result is [2,3,4]
 [1,2,3].map((number)=>number+1)
 
 // Note that you can extract the callback function and pass it to the map function:
 function addOne(arg){
     return arg+1
 }
 
 [1,2,3].map((number)=>addOne(number))
 // or
 [1,2,3].map(addOne)

 // We first define the function we will be using as an argument
 const addOne = (arg)=>arg+1
 
 // We than define our hof
 const higherOrderFunction = (fn, arg) => fn(arg)*2
  
 // The result will be 12
 higherOrderFunction(addOne, 5)

HoC - Higher Order Components

 // A page component that just render text
 const App = (props) => {
   return (
     <div className="App">
       <h1>A component</h1>
     </div>
   );
 };
 export default App;

🠋🠋🠋

 export const withUser = (Component) => (props) => {
   // Passing the user that you fetched 
   const currentUser = { authtenticated: true, email: "email@email.com" };
   return <Component currentUser={currentUser} {...props} />;
 };

 // A page component that just render text
 const App = (props) => {
   return (
     <div className="App">
       <h1>A component</h1>
       <h2>User: {props.currentUser.email}</h2>
     </div>
   );
 };
 // Wrapping with withUser function
 export default withUser(App);

参考

https://itnext.io/write-better-react-compose-multiple-functional-hocs-higher-order-components-442a11bd2e86