React 自訂Hook 簡單範例

React Hook除了內建的Hook API如useState、useEffect等外也可自訂Hook。

簡介

自訂Hook其實也只是一個function，但名稱必須以use開頭且裏面有使用內建的Hook API。

範例

下面範例修改自「React Render Props簡介」，以自訂Hook useLike()實現同樣的功能。

useLike()使用useState()建立state.count初值為0，並以陣列回傳state.count及handleLike()函式。

Hello及Hi component各自引用了useLike()來取得各自的count狀態及函式。

App.js

import React, {useState} from "react";
import "./App.css";

function App() {
  return (
    <div>
      <Hello name='John' />
      <Hi name='Mary' />
    </div>
  );
}

const useLike = () => {
  const [count, setCount] = useState(0);

  return [
    () => {
      setCount(count + 1);
    },
    count,
  ];
};

const Hello = (props) => {
  const [handleLike, count] = useLike();

  return (
    <div>
      <h1 onClick={handleLike}>Hello, {props.name}</h1>
      <span>Like:{count}</span>
    </div>
  );
};

const Hi = (props) => {
  const [handleLike, count] = useLike();
  return (
    <div>
      <h1 onClick={handleLike}>Hi, {props.name}</h1>
      <span>Like:{count}</span>
    </div>
  );
};

export default App;

Higher-Order Component與Render Props的設計手法都是為了讓stateful邏輯（包含狀態的邏輯）可重用，而React Hook提供狀態及行為的hook，使用自訂Hook包含了這兩種hook的效果即可替代上述兩種設計手法。換句話說就是可使用Hook替代大部分的HOC與Render Props寫法。

• React - 打造你自己的 Hook
• React Hook useEffect 簡單範例