基于ts+hooks完全实现的移动端组件库

已于 2023-12-26 10:23:20 修改
阅读量389 收藏 8
点赞数 5
文章标签： javascript 前端 react hooks 移动端组件库
于 2023-12-26 10:21:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37860930/article/details/135215130
版权

前言

这是我当初刚学react hooks时，参考vant和react源码写的一个移动端组件库，虽然现在看来其中有很多写法还是不够完善，但对当时的我提供了组织代码、封装组件、代码规范的一些思路

github地址：https://github.com/z-9527/sty-ui
预览地址：https://z-9527.github.io/sty-ui/#/

代码仅供学习和参考，请勿在生产环境使用

项目截图

zzh1918
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用TS 封装 自定义hooks，实现不一样的 CRUD
qq_45803050的博客
12-04 1208
使用TS 封装 自定义hooks，实现不一样的 CRUD
vue3+TS封装自定义hooks
weixin_44368048的博客
11-17 1282
vue3+ts项目封装自定义hooks
2024年前端最全vue3+ts 自定义hooks操作,在页面上获取x,y轴坐标，2024前端架构面试
最新发布
2401_84616533的博客
05-12 652
题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心。
HOOKS + TS
胖胖的博客
02-23 886
useState useState如果初始值不是null/undefined的话，是具备类型推导能力的，根据传入的初始值推断出类型；初始值是 null/undefined的话则需要传递类型定义才能进行约束。一般情况下，还是推荐传入类型（通过useState的第一个泛型参数）。 // 这里ts可以推断 value的类型并且能对setValue函数调用进行约束 const [value, setValue] = useState(0); interface MyObject { foo: string;
Vue 组件间的通信(1)
2401_84436058的博客
04-29 493
父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。
Vue3+ts+Hooks 父子传参的优点
xs_lovs的博客
09-29 1305
Vue3+ts 父子传参的优点
sty-ui:基于ts+hooks编写的移动端组件库
05-26
基于ts+hooks实现的移动端组件库 前言 自从公司项目使用了ts和hooks开发后，自己也在项目中封装过业务组件。但是自己还是想参考一下其它优秀框架如何封装代码的，于是自己利用业务时间开发了这个项目。主要的目的...
didala:一种基于TS + React + Hooks + RxJs + Koa2 + MongoDB实现的仿滴答清单的全栈应用
03-22
一种基于TS + React + Hooks + RxJs + Koa2 + MongoDB实现的仿滴答清单的全栈应用 演示版 本地运行 # clone git clone https://github.com/buynao/didala.git # 进入server文件夹，运行服务端 cd /didala/server #...
react_admin:TS + Hooks后台管理系统http
03-11
TS +挂钩开始制作的时间是从2020-4-28自己也发布过几个小型的demo，虽然没人看๑•ૅૄ•๑），但还是喜欢与大家共同学习进步快速预览项目介绍使用最新的技术栈制作React后台管理系统：针对react16的新特性制定练习...
基于react+hooks+typescript的模仿boss直聘源码(含服务端+客户端).zip
12-29
1.项目代码均经过功能验证ok，确保稳定可靠运行。欢迎下载体验！下载完使用问题请私信沟通。 2.主要针对各个计算机相关专业，包括计算机科学、...基于react+hooks+typescript的模仿boss直聘源码(含服务端+客户端).zip
umi-ts-app：umi3 + typescript + dva + react hooks快速构建管理系统
02-05
umi-ts-app技术栈：umi3 + react hooks + dva +打字稿+ antd该项目以为前端框架，以为UI组件库， 为项目数据流， 编写前端业务组件，以做为静态类型检查，包含完整的前端工程化实践。目录结构|-- config # 项目配置...
React-Hooks-Ts:React + Hooks + Ts最佳实践
03-25
React挂钩 React + Hooks + Ts最佳实践
React+Ts+Hook通过改变元素高度来实现原生下拉
m0_59074147的博客
04-11 780
tsx中 // 原生下拉（改变高度实现下拉效果） import {useEffect,useRef} from 'react' import './index.less' export default () => { const PullBox=useRef<HTMLDivElement | null>(null); let disY:number = 0; let y:number=0; let scale:number=0; let clientHeigh
学习一下 ts + hooks + react
冲锋
11-27 3175
用hooks: 基本不写 类组件了 一个useEffect 的功能 太棒了, 比钩子更清晰 ts: 写的贼难受, 难受啊 ts-react-hooks-antd 仓库地址 第一次撸ts啊, 个别地方还是any 一把梭的, 至于为啥不用redux, 那就是难受, 不想碰那东西, 撸 hooks 真爽,况且,用 context + useRucer 已经可以实现 redux 功能了 参考...
react-hooks-ts项目实战
qq_31676725的博客
07-27 1296
欢迎您的到来！ gitee地址：react-hooks-ts项目实战 github地址：react-hooks-ts项目实战 哥们，好使别忘记帮忙点个赞！！！！！！
可能是基于 Hooks 和 Typescript 最好的状态管理工具
weixin_33768481的博客
11-14 322
接上一篇：我理想中的状态管理工具 之前说，对于我个人来而言，理想的状态管理工具只需同时满足两个特点： 简单易用，并且适合中大型项目 完美地支持 Typescript 未能找到一个完美满足这两点的，所以我决定自己造了一个：叫 Stamen。 首先是 简单易用，并且适合中大型项目，Stamen 的 Api 设计借鉴了 dva、mirror、rematch，但却更简单，主要借鉴了它们的 model ...
2019，手把手教你用React Hooks解决状态管理（上）
weixin_34074740的博客
02-19 2227
React团队在今年二月发布了React 16.8，想必打开这篇文章的你一定知道这个版本包含了一个令人期待的新特性：Hooks。 作为React 16.8的宠儿Hooks，大家也很关心其带来的变化，其中备受关注的一点就是状态管理，以至于大家很容易可以在各个社区搜到这些问题： React有了Hooks还需要Redux和Mobx吗？ React Hooks会取代Redux吗？ Redux有Hooks...
关于TS在React-Redux-Hooks中使用的问题
eswang的CSDN博客
10-31 2625
前言 上一篇文章我们通过介绍三种不同的实现计数器的方法简单讲了react，redux，hooks的几个重要特性和基本用法，因为我创建脚手架时使用的是TS的写法，所以在写代码的时候还额外遇到了一些问题，前两个例子因为没涉及到什么东西，所以和JS的写法差不多，但是最后使用Hooks的时候因为设计的方法较多，所以遇到了一个问题，这里记录下来加深对于类型安全和Redux的理解。 复盘 首先我们还是先把TS...
TypeScript 中使用React Hook
weixin_34228662的博客
05-18 1643
从 React V 16.8.0 和 React Native 0.59.0 版本开始, 引入了React Hook的概念。React Hook 在开发支持就考虑到了类型，所以很多Hook函数可以直接推断出他们的参数、返回值等类型，但也有一些场景需要我们显示声明类型。阅读本文前你需要了解React Hook 的基本用法，参考这里。下面会总结一下我们如何在 TypeScript 中使用React H...
ts+hooks实现倒计时组件
06-03
以下是使用 TypeScript 和 React Hooks 实现的简单倒计时组件： ```typescript import React, { useState, useEffect } from "react"; interface CountdownProps { targetDate: Date; } const Countdown: React.FC<CountdownProps> = ({ targetDate }) => { const [days, setDays] = useState(0); const [hours, setHours] = useState(0); const [minutes, setMinutes] = useState(0); const [seconds, setSeconds] = useState(0); useEffect(() => { const intervalId = setInterval(() => { const now = new Date(); const diff = targetDate.getTime() - now.getTime(); const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff / (1000 * 60 * 60)) % 24); const minutes = Math.floor((diff / (1000 * 60)) % 60); const seconds = Math.floor((diff / 1000) % 60); setDays(days); setHours(hours); setMinutes(minutes); setSeconds(seconds); }, 1000); return () => clearInterval(intervalId); }, [targetDate]); return ( <div> <div>{days} days</div> <div>{hours} hours</div> <div>{minutes} minutes</div> <div>{seconds} seconds</div> </div> ); }; export default Countdown; ``` 在这个组件中，我们使用了 `useState` 和 `useEffect` Hooks 来管理组件的状态和生命周期。每次渲染时都会计算倒计时的时间差并更新状态。当组件被卸载时，我们也使用了 `useEffect` Hook 来清除定时器，以免造成内存泄漏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值