網頁

2021/7/27

React 自訂Hook 簡單範例

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


簡介

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


範例

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

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

HelloHi 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寫法。


沒有留言:

張貼留言