react 中的自定义钩子是封装可重用逻辑、管理状态和处理副作用的绝佳方法，可以保持代码整洁和可维护。以下是一些关键用例以及创建自定义挂钩的意义：
1.跨组件重用逻辑
示例：从 api 获取数据。
您可以创建一个自定义挂钩（例如 usefetch）来封装获取数据并处理加载、成功和错误状态的逻辑。然后可以在多个组件中重用该逻辑。
import { usestate, useeffect } from 'react';
const usefetch = (url) => {
const [data, setdata] = usestate(null);
const [loading, setloading] = usestate(true);
const [error, seterror] = usestate(null);
useeffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => {
setdata(data);
setloading(false);
})
.catch((error) => {
seterror(error);
setloading(false);
});
}, [url]);
return { data, loading, error };
};
export default usefetch;
2.管理复杂的状态逻辑
示例：管理表单状态
自定义挂钩可用于以可重用的方式管理表单状态和验证逻辑。
import { usestate } from 'react';
const useform = (initialstate) => {
const [values, setvalues] = usestate(initialstate);
const handlechange = (event) => {
const { name, value } = event.target;
setvalues({
...values,
[name]: value,
});
};
const resetform = () => {
setvalues(initialstate);
};
return [values, handlechange, resetform];
};
export default useform;
3.抽象副作用
示例：与本地存储同步。
您可以创建自定义挂钩来管理与本地存储同步的状态。
import { useState, useEffect } from 'react';
const useLocalStorage = (key, initialValue) => {
const [value, setValue] = useState(() => {
const storedValue = localStorage.getItem(key);
return storedValue ? JSON.parse(storedValue) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
};
export default useLocalStorage;
自定义 hook 的意义
1.代码可重用性
自定义挂钩允许您在多个组件之间重用逻辑，而无需重复代码，从而推广 dry（不要重复自己）原则。
2.关注点分离
通过将逻辑从组件移出并放入钩子中，您可以使组件代码更清晰并更专注于渲染，而自定义钩子则处理逻辑。
3.可测试性
自定义钩子可以独立于使用它们的组件进行测试，从而更容易为复杂逻辑编写单元测试。
3.一致性
使用自定义挂钩可确保应用程序不同部分的行为一致，因为在调用挂钩的任何地方都使用相同的逻辑。
结论
react 中的自定义钩子是创建可重用、可维护和可测试代码的强大工具。它们帮助您封装复杂的逻辑，有效地管理状态和副作用，并促进关注点分离和代码可重用性等最佳实践。通过利用自定义挂钩，您可以保持组件干净并专注于其主要目的：渲染 ui。
