【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

总结:

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

相关推荐
tuokuac20 小时前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼20 小时前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少20 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.20 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者20 小时前
web 网页数据传输处理过程
前端
非凡ghost20 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
w2sfot21 小时前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴21 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
吃饭最爱21 小时前
html的基础知识
前端·html
我没想到原来他们都是一堆坏人21 小时前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python