浅谈react如何自定义hooks

react 自定义 hooks

简介

一句话：使用自定义hooks可以将某些组件逻辑提取到可重用的函数中。

自定义hooks是一个从use开始的调用其他hooks的Javascript函数。

下面以一个案例: 新闻发布操作，来简单说一下react 自定义 hooks。

不使用自定义hooks时

未发布新闻 – UnPublished.js

// UnPublished.jsimport React, { useEffect, useState } from "react";
import { fetchGetUnPublishedNewsList } from "../../../utils/api";
import NewsPublish from "./components/NewsPublish";import { reactLocalStorage } from "reactjs-localstorage";export default function UnPublished() {// 获取用户权限列表const { roleId, region, username } = reactLocalStorage.getObject("token");const [dataSource, setdataSource] = useState([]);useEffect(() => {const fetchData = async () => {let params = {author: username,publishState: 1, // publishStateList = ['未发布','待发布','已发布','已下线']};const newsListData = await fetchGetUnPublishedNewsList(params); setdataSource(newsListData);};fetchData();}, []);return (<div><NewsPublish dataSource={dataSource}></NewsPublish></div>);
}

发布新闻 – Published.js

// Published.jsimport React, { useEffect, useState } from "react";
import { fetchGetUnPublishedNewsList } from "../../../utils/api";
import NewsPublish from "./components/NewsPublish";import { reactLocalStorage } from "reactjs-localstorage";export default function UnPublished() {// 获取用户权限列表const { roleId, region, username } = reactLocalStorage.getObject("token");const [dataSource, setdataSource] = useState([]);useEffect(() => {const fetchData = async () => {let params = {author: username,publishState: 3, // publishStateList = ['未发布','待发布','已发布','已下线']};const newsListData = await fetchGetUnPublishedNewsList(params); setdataSource(newsListData);};fetchData();}, []);return (<div><NewsPublish dataSource={dataSource}></NewsPublish></div>);
}

很明显，以上两个文件呈现效果不同，但使用的 逻辑代码大部分相同 时，这些逻辑代码我们就可以使用hooks进行逻辑复用。

使用自定义hooks

我们抽离以上两个文件里可以复用的逻辑代码，抽离相同逻辑代码部分，自定义hooks (即：把fetch请求数据部分，单独抽离出来),新建一个usePublish的文件。

./components/usePublish

// ./components/usePublishimport { useEffect, useState } from "react";
import { fetchGetUnPublishedNewsList } from "../../../../utils/api";
import { reactLocalStorage } from "reactjs-localstorage";function usePublish(type) { // 注意这里// 获取用户权限列表const { username } = reactLocalStorage.getObject("token");const [dataSource, setdataSource] = useState([]);useEffect(() => {const fetchData = async () => {let params = {author: username,publishState: type, // publishStateList = ['未发布','待发布','已发布','已下线']};const newsListData = await fetchGetUnPublishedNewsList(params);setdataSource(newsListData);};fetchData();}, []);return { dataSource };
}export default usePublish;

未发布新闻 – UnPublished.js 改进

import NewsPublish from "./components/NewsPublish"; import usePublish from "./components/usePublish"; // 引入自定义hooksexport default function UnPublished() {  const { dataSource } = usePublish(1);   // 使用自定义hooksreturn (<div> <NewsPublish dataSource={dataSource}></NewsPublish></div>);
}

发布新闻 – Published.js 改进

import NewsPublish from "./components/NewsPublish";import usePublish from "./components/usePublish"; // 引入自定义hooksexport default function Published() {const { dataSource } = usePublish(2); // 使用自定义hooksreturn (<div><NewsPublishdataSource={dataSource}></NewsPublish></div>);
}

自定义hooks实质

• 自定义 Hooks 是一个函数，约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks
• Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！
• 自定义 Hooks 用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值（就像使用普通函数一样）

总结

这个案例简单说明了如何使用react自定义hooks。

在自定义hooks时，我们需要考虑几个问题：

• 什么时候使用自定义hooks？
• 使用自定hooks时应该传入什么参数，又返回出什么值？
• 使用自定义hooks，我的代码逻辑有没有变简洁？

什么时候使用自定义hooks？

• 发现某处业务逻辑重复使用时，可将业务逻辑抽离开
• 组件比较复杂时，可通过自定义hooks拆分组件逻辑，简化代码

使用自定hooks时应该传入什么参数，又返回出什么值？

传参和返回值是比较灵活的，需要注意的是，不仅能传常规的数据类型，还能传递函数对象

为什么时候自定义hooks，我的代码好像没有变简洁？

要理解UI组件和容器组件这两个概念。

恰当的抽离业务逻辑部分，保留组件的UI部分。

组件复杂时拆分可能也有一定的难度，过度设计会导致组件更难维护，因此要把控好度 。

参考文档

• https://blog.csdn.net/DDAD9527/article/details/121341862