#author("2022-06-05T15:52:12+09:00","default:ryuichi","ryuichi")
* HoC - Hight Order Components [#w82a57d9]
#author("2022-06-05T16:22:53+09:00","default:ryuichi","ryuichi")
* HoC - Higher Order Components [#w82a57d9]
** HoF - Higher Order Functions [#od021eb5]
#sh(javascript){{{
// 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)
}}}
#sh(javascript){{{
// 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 [#xb8eb3e2]
#sh(javascript){{{
// A page component that just render text
const App = (props) => {
return (
<div className="App">
<h1>A component</h1>
</div>
);
};
export default App;
}}}
🠋🠋🠋
#sh(javascript){{{
export const withUser = (Component) => (props) => {
// Passing the user that you fetched
const currentUser = { authtenticated: true, email: "email@email.com" };
return <Component currentUser={currentUser} {...props} />;
};
}}}
#sh(javascript){{{
// 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);
}}}
** 参考 [#id2bfb50]
https://itnext.io/write-better-react-compose-multiple-functional-hocs-higher-order-components-442a11bd2e86
