【React-hooks篇幅】自定义hooks

首先得了解自定义 Hooks 跟普通函数区别在于哪里?

  • Hooks 只应该在 React 函数组件内调用,而不应该在普通函数调用。
  • Hooks 能够调用诸如 useState、useEffect、useContext等,普通函数则不能。由此可以通过内置的Hooks等来获得Firber的访问方式,例如可以在当前节点用useRef存点数据。

运用场景:

静态数据处理,用来常量变更的,比如 通用表头,与store和context不一样的是,不用渗透,不会记忆变更,可用作取或者修改想要的数据。

优点:

hooks和react生命周期都可用

灵活性,操作性很强

与mixin混合自定义很像

缺点:

兼容性有问题,因为是hooks写法,只能支持在 hooks文件调用,不支持内组件class component

eslint请用use命名函数,不然会出警告。

代码块:

复制代码
//e可传入参数,比如默认值
const useCommonData = (e:any)=>{
  const [a, setA] = useState(e);
  return {a,setA}
}
export default useCommonData 

调用的话

复制代码
import useCommonData  form "./xxxx
const b = ()=>{
const {a,setA} = useCommonData("1")
}
export default b

总结:

既然都是玩数据的时代了,骚操作走起来,努力加强自己!

相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程6 小时前
2025前端面试题
前端·面试
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf10 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js