日常记录

温故而知新

首页 归档 标签 关于

React Hooks 与 Immutable 数据流实战 note01

2021-02-05 3 min read

一、项目简介及技术栈

本小册的项目是以 React 全家桶 (包含 hooks) 以及 immutable 数据流为基础打造的一款高质量的移动端音乐类 WebApp 。

前端部分

  • react v16.8 全家桶 react react-router 构建MVVM框架
  • redux 状态管理
  • redux-thunk 处理异步逻辑 redux 中间件
  • immutable 持久性数据结构处理库
  • react-lazyload react懒加载库
  • better-scroll 提升移动端滑动体验
  • axios 请求后端api

后端

采用 github 上开源的 NodeJS 版 api 接口 [NeteaseCloudMusicApi]https://github.com/Binaryify/NeteaseCloudMusicApi，提供音乐数据。

其他

  • create-react-app
  • eslint
  • iconfont
  • fastclick 移动端解决点击延迟300ms的问题

二、项目规范

  1. class 组件不用 使用hook 统一函数组件
  2. 组件状态用hooks处理，凡是业务数据放在redux管理
  3. ajax请求以及后续数据处理代码 放在actionCreator中，由redux-thunk处理，精简组件代码
  4. 每个容器独立reducer，然后全局store下通过redux的combineReducer方法合并
  5. JS变量含函数名 小驼峰，组件名或者styled-component导出的样式容器使用大驼峰，常用名所有字母大写
  6. 普通CSS类名小写，单词下划线连接，CSS动画钩子类中单词用-连接
  7. 凡是props中有的数据，全部在组件最前面提前解构赋值，并且，获得属性名和方法名要分开声明，父组件获取props和通过react-redux映射获得的props也要分开声明
  8. useEffect 统一写在最前面，紧跟着props解构赋值代码后
  9. 负责返回JSX的方法，统一放在最后，中间不穿插事件和其他处理逻辑
  10. mapDispatchToProps返回的函数中，函数名为xxDispatch，以免与现有action冲突
  11. 每个组件使用memo包裹，更新之前与props对比，如果不变则不更新

三、 项目整体架构及演示

[React Hooks + Immutable 数据流项目架构图]https://user-gold-cdn.xitu.io/2019/12/10/16ef01876df7d36d?imageslim

四、 目录及对应章节

chapter1 和 chapter2 已经在第 4 节和第 5 节声明。
6-9 节 -> chapter3
10-12 节 -> chapter4
13-14 节 -> chapter5
15-19 节 -> chapter6
20-22 节 -> chapter7
23-28 节 -> chapter8
28-31 节 -> chapter9
32-34 节 -> chapter10
Powered by Gridea RSS