如何使用自定义hooks对React组件进行重构
这篇文章主要介绍了如何使用自定义hooks对React组件进行重构的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何使用自定义hooks对React组件进行重构文章都会有所收获，下面我们一起来看看吧。
成都网站制作、做网站服务团队是一支充满着热情的团队，执着、敏锐、追求更好，是创新互联的标准与要求，同时竭诚为客户提供服务是我们的理念。创新互联公司把每个网站当做一个产品来开发，精雕细琢，追求一名工匠心中的细致，我们更用心！
处理复杂性
我们应该要意识到，虽然函数组件被写在“一个函数”里，但是这个函数仍然可以像别的函数一样，可以由许多其他函数组成的。像useState ，useEffect ，抑或是别的hooks，子组件它们本身也是个函数。因此我们自然可以利用相同的思路来处理函数组件的复杂性问题：通过建立一个新函数，来把即符合公共模式又复杂的代码封装起来。
比较常见的处理复杂组件的方式是把它分解成多个子组件。但是这么做可能会让人觉得不自然或是很难准确的去描述这些子组件。这时候我们就可以借助梳理组件的钩子函数的逻辑来发现新的抽象点。
每当我们在组件内看到由useState 、useEffect 或是其他内置钩子函数组成的长长的列表时，我们就应该去考虑是否可以将它们提取到一个自定义hook中去。自定义hook函数是一种可以在其内部使用其他钩子函数的函数，并且创建一个自定义钩子函数也很简单。
如下所示的组件相当于一个看板，用一个列表展示一个用户仓库的数据（想像成和github类似的）。这个组件并不算是个复杂组件，但是它是展示如何应用自定义hook的一个不错的例子。
function Dashboard() {
const [repos, setRepos] = useState([]);
const [isLoadingRepos, setIsLoadingRepos] = useState(true);
const [repoError, setRepoError] = useState(null);
useEffect(() => {
fetchRepos()
.then((p) => setRepos(p))
.catch((err) => setRepoError(err))
.finally(() => setIsLoadingRepos(false));
}, []);
return (
{isLoadingRepos && }
{repoError && {repoError}}
{repos.map((r) => (
))}
);
}
我们要把钩子逻辑提取到一个自定义hook中，我们只需要把这些代码复制到一个以use 开头的函数中（在这里我们将其命名为useRepos）：
/**
* 请求所有仓库用户列表的hook函数
*/
export function useRepos() {
const [repos, setRepos] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetchRepos()
.then((p) => setRepos(p))
.catch((err) => setError(err))
.finally(() => setIsLoading(false));
}, []);
return [repos, isLoading, error] as const;
}
必须用use 开头的原因是linter 插件可以检测到你当前创建的是个钩子函数而不是普通函数，这样插件就可以检查你的钩子函数是否符合正确的自定义钩子的相关规则。
相比提炼之前，提炼后出现的新东西只有返回语句和as const 。这里的类型提示只是为了确保类型推断是正确的：一个包含3个元素的数组，类型分别是Repo[], boolean, string | null 。当然，你可以从钩子函数返回任何你希望返回的东西。
译者注：这里添加as const 在ts类型推断的区别主要体现在数字元素的个数。不添加as const ，推断的类型为(string | boolean | Repo[] | null)[]，添加后的类型推断为readonly [Repo[], boolean, string | null] 。
将自定义钩子useRepos 应用在我们的组件中，代码变成了：
function Dashboard() {
const [repos, isLoadingRepos, repoError] = useRepos();
return (
{isLoadingRepos && }
{repoError && {repoError}}
{repos.map((i) => (
))}
关于“如何使用自定义hooks对React组件进行重构”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何使用自定义hooks对React组件进行重构”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
