高階コンポーネントはコンポーネントを引数に取り、新しいコンポーネントを戻す関数コンポーネント。JavaScriptの高階関数のコンポーネント版。メリットは、高階コンポーネントに記載された処理をカプセル化することで繰り返し使用できる点。代表的な例として、データを取得する処理を高階コンポーネントに記載することで、データを取得する処理をカプセル化する。使用者は形が異なるデータを表示するコンポーネントを高階コンポーネントに代入することで、データを取得する処理を意識することなく、使用できる。高階コンポーネントの例： ```jsx const PostList = ({ posts }) => { return (

{post.title}

); }; const HOC = (Component) => { return NewComponent = (props) => { //Componentに与えるデータなどの処理。代表的な例ではデータの取得など return ; }; }; ``` ■ useMemoをラップした高階コンポーネント化した例 ```jsx const Foo = (time) => { const dateString = useMemo( () => { 　const date = new Date(time) return `${date.getFullYear() } 年 ${dateObj.getMonth() + 1} 月 ${dateObj.getDate()} 日` },[ time ]) return (

日付：{dateString}

); } ■JavaScriptの高階関数引数に関数を取ることができるまたは関数を戻すことができる関数。下記の例は足し算や掛け算の関数をそのまま使えばよいのでは？というツッコミが入る //足し算の関数 const add = (num1, num2) => { return num1 + num2; } //掛け算の関数 const multiple = (num1, num2) => { return num1 * num2; } //関数を返す関数 const calculation = (operation) => { return function (...args) { 　//ここで何が処理し、returnする関数に渡してやることに意味がある気がする return operation(...args); }; } const addCal = calculation(add); const multipleCal = calculation(multiple); console.log(addCal(6, 3)); // 9が返ってくる console.log(multipleCal(6, 3)); // 18が返ってくる ``` ~~~javascript ■Reactの高階コンポーネント //Postsのリストを返すコンポーネント const PostList = ({ posts }) => { return (

{post.title}

); }; export default PostList; //postsのデータを取得し、PostlListコンポーネントに代入して、PostlListを返す高階コンポーネント import { useState, useEffect } from 'react'; const withPosts = (Component) => { return function (props) { const [posts, setPosts] = useState([]); const getPosts = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/posts'); const data = await res.json(); setPosts(data); }; useEffect(() => { getPosts(); }, []); return ; }; }; export default withPosts; //アプリケーション側での実装 import PostList from './components/PostList'; import withPosts from './components/withPosts'; const CurrentPostList = withPosts(PostList); function App() { return (

); } export default App; ~~~

スキル図鑑