当前位置: 首页 > news >正文

关于form、自定义Hook、灰度发布、正则表达(只能输入数字和不要空格)

a、关于form

//获取form实例
const [form]=ProForm.useForm();
const form=Form.useFormInstance();//监听form或者form中的某一个字段
const formWatch=ProForm.useWatch(name,form)
const formWatch=Form.useWatch(name,form)//
<ProFormDependency name={['name']}>{({ name }) => {console.log('打印出来的值就是依赖的数据',name )return (<ProFormTextname="code"label="名称"placeholder="请输入名称"/>);}}
</ProFormDependency>

b、自定义Hook和自定义函数

        自定义Hook和自定义函数在React开发中扮演着不同的角色,尽管它们看起来可能相似。以下是两者的主要区别:

        自定义Hook

  • 1. 目的:自定义Hook是一种利用React的Hook机制来封装和复用状态逻辑的方式。它使得你可以在不复制粘贴代码的情况下,在多个组件之间共享状态逻辑。
  • 2. 使用场景:当你发现自己需要在多个地方重复相同的逻辑(例如数据获取、订阅或手动修改DOM),可以将这些逻辑提取到一个自定义Hook中。
  • 3. 命名习惯:通常以`use`开头命名,比如`useFetch`、`useToggle`等,以此表明这是一个自定义Hook,并且遵循了React Hook的规则。
  • 4.内部实现:可以调用其他的Hooks,如`useState`、`useEffect`等。这是自定义Hook与普通自定义函数的关键区别之一。

        自定义函数

  • 1. 目的:自定义函数是普通的JavaScript函数,旨在执行特定任务或计算,返回结果或副作用。它们不是专门针对React设计的。
  • 2. 使用场景:用于处理业务逻辑、格式化数据、辅助函数等,与UI渲染或状态管理无关的任务。
  • 3. 命名习惯:没有特殊的命名要求,根据项目的命名规范来命名即可。
  • 4. 内部实现:不涉及React的状态或生命周期相关的操作,也不会调用任何Hook。

        总结来说,自定义Hook主要用于封装可复用的状态逻辑,而自定义函数则更通用,可用于执行各种任务。理解何时使用自定义Hook而非普通函数,有助于保持组件的清晰度和重用性。

//封装一个自定义hook获取数据
export const useHandleFunction = ( parmars?:string ) => {const { data } = useRequest (async ()=>接口名字({current:1,pageSize:10,data:{ parmars(参数) },}),{refreshDeps:[parmars],ready:!!parmars,},); return data;
}//这样直接使用
const data useHandleFunction (parmars);//像是在项目中的对于页面上的一些单独逻辑进行封装,直接可以封装成自定义Hook

c、灰度发布

        灰度发布是一种渐进式地将新功能或更新推送给用户的策略,旨在减少风险并逐步验证新版本的稳定性和性能。以下是关于如何实施灰度发布、它的用途以及用户是否能体验到的相关信息:

         如何进行灰度发布

  • 1. 按用户比例:可以通过配置路由规则或使用特定的软件工具来控制将多少比例的流量指向新版本的应用或服务。例如,开始时可以只让10%的用户访问新版本。
  • 2. 按用户特征:根据用户的某些属性(如地理位置、使用的设备类型、用户ID等)选择性地向部分用户推送新版本。这通常需要在应用中集成相应的逻辑来识别和区分这些用户。
  • 3. 按请求比例:对于无状态的服务,可以根据请求的比例分配到不同的版本上。这种方法适用于微服务架构下的部署。

         灰度发布的用途

  • 1. 降低风险:通过仅对一部分用户推出新版本,可以在更大范围推广之前发现潜在问题。
  • 2.快速回滚:如果发现问题,可以迅速切换回旧版本,以最小化对用户体验的影响。
  • 3.收集反馈:早期使用者可以提供宝贵的反馈,帮助改进产品。
  • 4.测试实际环境下的表现:确保新功能在真实环境下工作正常,而不是仅限于开发或测试环境。

         用户是否能体验到

        用户能否直接体验到灰度发布取决于具体的实现方式。如果用户被选为灰度发布的一部分,他们可能会注意到一些新的功能或界面变化。然而,这种变化通常是无缝的,大多数用户可能不会意识到自己正在参与一个灰度发布的过程。对于那些没有被选中的用户,他们将继续使用现有的版本,直到最终全部用户都迁移到新版本为止。

        总的来说,灰度发布是一个强大的工具可以帮助团队更安全、更有效地推出新功能或更新,同时确保了良好的用户体验。


d、正则表达(只能输入数字和不要空格)

[pattern:/^[^u4e00-u9fa5]+$/,message:'不能输入中文'},
{pattern:/^[^\s]+$/,message:'请删除不必要的空格'},

相关文章:

  • kafka logs storage
  • 【LeetCode 热题 100】二叉树 系列
  • 深入解析 C# 常用数据结构:特点、区别与优缺点分析
  • 快速上手Pytorch Lighting框架 | 深度学习入门
  • 经济体制1
  • 网络基础入门第6-7集(抓包技术)
  • 含铜废水循环利用体系
  • 【RAG】indexing 中的 Hierarchical Indexing(分层索引)
  • 手写 Vue 源码 === 依赖清理机制详解
  • Arm核的Ubuntu系统上安装Qt
  • 系统网络运维基础:Linux与Windows实践指南(带电子书资料)
  • Qt 通过控件按钮实现hello world + 命名规范(7)
  • 课外活动:简单了解原生测试框架Unittest前置后置的逻辑
  • Vue.js Watch 侦听器:深入理解与应用
  • 低代码云MES、轻量级部署、让智造更简单
  • 【AI入门】CherryStudio入门5:创建知识库,对接Obsidian 笔记
  • 特殊版本,官宣永久免费
  • 摄像头模组AF、OIS模组
  • 308.旅行终点站
  • 援外培训项目冈比亚数字政府能力建设研修班莅临麒麟信安参观考察
  • A股三大股指低收:银行股再度走强,两市成交11920亿元
  • 溢价26.3%!保利置业42.4亿元竞得上海杨浦宅地,楼板价80199元/平方米
  • 司法部:加快研究制定行政执法监督条例,建立完善涉企行政执法监督长效机制
  • 央行、证监会:科技创新债券含公司债券、企业债券、非金融企业债务融资工具等
  • 上海虹桥高铁站拦门事件反转,谁在带偏网友?
  • 马上评|“景区陪爬”能成为新职业吗?