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寫法。
沒有留言:
張貼留言