如何编写 ReactJs 自定义钩子
自从我们在项目代码库中引入 Hooks 以来，已经过去了相当长一段时间。Hooks 的出现使得代码更易于重用、更简洁、更易读，编写起来也更令人满意。它们无疑代表了 ReactJs 开发的未来。
除了库本身提供的基础 Hooks 之外，你还可以编写自己的 Hook！（无论是小型 Hook 还是大型 Hook :D）。这类 Hook 被称为自定义 Hook。React 官方文档中是这样定义的：自定义 Hook 是一个 JavaScript 函数，其名称以“` use”开头，并且可以调用其他 Hook。在本篇简短的教程中，我将展示如何实现这一点！（……以及如何使用 TypeScript）
状态钩子（反自定义钩子）
本示例将展示如何实现一个简单的自定义计数器钩子。它内部使用了 React 的 useState 函数，并将状态信息以及其他几个函数打包到一个对象中返回。返回的对象使用了简写属性名语法。
const useCount = () => {
const [count, setCount] = useState<number>(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const increaseBy = (increaser: number) => setCount(count + increaser);
const decreaseBy = (decreaser: number) => setCount(count + decreaser);
return { count, increment, decrement, increaseBy, decreaseBy };
};
现在，这个钩子可以在函数组件内的任何位置使用。
使用示例：
const { count, increment, decrement, increaseBy, decreaseBy } = useCount();
<div>
<div>{count}</div>
<button onClick={increment}>increment</button>
<button onClick={decrement}>decrement</button>
<button onClick={() => increaseBy(20)}>increase by 20</button>
<button onClick={() => decreaseBy(20)}>decrease by 20</button>
</div>
useEffect 钩子（自定义获取钩子）
这个例子展示了如何在自定义钩子中使用 useEffect。也许你想用类似的方法来改进你的数据获取操作？
或者，如果你添加了大量的事件处理程序，也可以为此编写一个自定义钩子！
const useFetch = (requestUrl: string) => {
// set your fetch data and error types instead of any
const [data, setData] = useState<any>(null);
const [error, setError] = useState<any>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
React.useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
const response = await fetch(`${requestUrl}`);
const json = await response.json();
setData(json);
} catch (err) {
setError(err);
}
setIsLoading(false);
};
}, [requestUrl]);
return { data, error, isLoading };
};
UseEffect 的自定义钩子非常实用。不妨看看Bruno Lemos最初开发的useWhyDidYouUpdate钩子。
结论
从这些简洁明了的示例中可以看出，这些钩子非常实用。它们最大的优点在于极高的复用性，即使在不同的项目中也能轻松使用。
如果你创建了一个优秀的钩子，你肯定可以在任何其他项目中使用它！是不是很棒？此外，任何你想要、需要或想到的钩子都可以创建。如果你发现代码中存在重复的模式，例如使用状态或响应特定事件，不妨尝试将其放入自定义钩子中。
以下是一些其他人制作的优秀 hooks 的参考资料：
• https://usehooks.com/
• https://github.com/rehooks/awesome-react-hooks
你有哪些定制的鱼钩？目前为止你觉得它们怎么样？
如果你还有什么想补充的，请在评论区告诉我 :)