英文网站建设 江门,制作企业网站页面多少钱,如何为网站引流,摄影网站怎么做数据库react 自定义 hooks
简介
一句话#xff1a;使用自定义hooks可以将某些组件逻辑提取到可重用的函数中。
自定义hooks是一个从use开始的调用其他hooks的Javascript函数。
下面以一个案例: 新闻发布操作#xff0c;来简单说一下react 自定义 hooks。
不使用自定义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 (divNewsPublish 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 (divNewsPublish 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 (divNewsPublishdataSource{dataSource}/NewsPublish/div);
}自定义hooks实质
自定义 Hooks 是一个函数约定函数名称必须以 use 开头React 就是通过函数名称是否以 use 开头来判断是不是 HooksHooks 只能在函数组件中或其他自定义 Hooks 中使用否则会报错自定义 Hooks 用来提取组件的状态逻辑根据不同功能可以有不同的参数和返回值就像使用普通函数一样
总结
这个案例简单说明了如何使用react自定义hooks。
在自定义hooks时我们需要考虑几个问题
什么时候使用自定义hooks使用自定hooks时应该传入什么参数又返回出什么值使用自定义hooks我的代码逻辑有没有变简洁
什么时候使用自定义hooks
发现某处业务逻辑重复使用时可将业务逻辑抽离开组件比较复杂时可通过自定义hooks拆分组件逻辑简化代码
使用自定hooks时应该传入什么参数又返回出什么值
传参和返回值是比较灵活的需要注意的是不仅能传常规的数据类型还能传递函数对象
为什么时候自定义hooks我的代码好像没有变简洁
要理解UI组件和容器组件这两个概念。
恰当的抽离业务逻辑部分保留组件的UI部分。
组件复杂时拆分可能也有一定的难度过度设计会导致组件更难维护因此要把控好度 。
参考文档
https://blog.csdn.net/DDAD9527/article/details/121341862
