【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

总结:

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

相关推荐
江城开朗的豌豆2 分钟前
Vue3 数据绑定的进化:为什么Proxy取代了defineProperty
前端·javascript·vue.js
DoraBigHead8 分钟前
闭包全解与 V8 深潜
前端·javascript·面试
然我10 分钟前
浏览器是如何 “多开” 的?从进程到线程,拆解浏览器的并发逻辑
前端·javascript·面试
山河木马17 分钟前
前端学C++可太简单了:引用
前端·javascript·c++
江城开朗的豌豆18 分钟前
Vue 祖孙组件通信:3种实用方案,轻松搞定跨代传值!
前端·javascript·vue.js
独立开阀者_FwtCoder19 分钟前
Nginx 正式拥抱现代 JavaScript
前端·javascript·架构
独立开阀者_FwtCoder19 分钟前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js
江城开朗的豌豆24 分钟前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js
全宝26 分钟前
🚀 一文搞定 claude code:国内环境下的安装、配置与体验
前端·ai编程·claude
寻觅~流光31 分钟前
封装---优化try..catch错误处理方式
开发语言·前端·javascript·typescript