预览地址:https://yangzw.vip/covid-19
笔者编写该项目是为了让入门React Hooks的同学能快速学会与应用这个强大的React特性
,项目虽小但五脏俱全,灵活运用React Hooks
开发技巧,将Hook
贯穿到整个项目中,结合实际场景解决实际问题。
本项目代码简洁条理清晰,很适合前端小白与对React Hooks
感兴趣的小伙伴学习,若你是大神请忽略吧。整个项目使用到以下Hook
,这几个Hook
已能完成大部分实际应用需求。
- 内置Hook
- useState:定义
状态
和状态修改逻辑
- useEffect:执行某些可能的
副作用
- useCallback:缓存
引用类型
- useReducer:定义
状态
和状态修改逻辑
- useContext:管理
全局数据状态
- useState:定义
- 自定义Hook
- useRequest:封装接口请求的业务逻辑
- useStore:封装小型
Redux
的业务逻辑 - useViewport:封装屏幕断点的业务逻辑
- 安装构建工具:
npm i -g @yangzw/bruce-app
- 安装项目依赖:
npm i
或yarn
- 启动构建流程:
bruce-app b
,选择开发环境
- 启动打包流程:
bruce-app b
,选择测试环境
或生产环境
@yangzw/bruce-app是一个零配置开箱即用的JS/React/Vue应用自动化构建脚手架,真正实现构建代码与业务代码完全分离,无需关注构建过程,专心编写业务代码。更多详情请查看官网文档。
关注公众号IQ前端
,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔