react 前端项目技术选型、开发工具、周边生态
react 前端项目技术选型、开发工具、周边生态
声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识
- 主架构:react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi
- 扩展架构:styled-components, recompose, react-loadable
- UI 框架:ant-design, ant-design-mobile, material-ui, Semantic-UI-React, blueprint, react-bootstrap
- 服务器端渲染:next.js, razzle, react-server, beidou
- 开发工具:storybook, react-devtools, redux-devtools, redux-devtools-extension
- 测试:enzyme, react-testing-library, jest
- 替代库:preact, inferno
- 插件库:react-motion, react-select, reselect, react-beautiful-dnd, react-canvas, redux-form, recharts, react-dnd, react-helmet
1. 架构选型演进
- 如果页面比较简单,可以只用
react
- 如果需要本地路由功能,比如在单页面应用(SPA)中维持多个页面,并且可以本地控制路由跳转逻辑,这时就需要搭配使用
react-router
- 一般稍复杂的页面都会遇到一些问题:组件之间的通信问题(比如 A 组件想要改变 B 组件的
state
)、跨组件数据储存与共享问题(比如多页面购物车数据存储)。react
本身并不能很好的解决这个问题,需要搭配使用redux
redux
本身只实现了 flux 理念,以及一些基础的功能,但在使用中,还需要扩展一些功能,比如异步派发action
,这时可以选择搭配使用redux-thunk
来解决异步派发action
的问题。另外,也是选择redux-saga
,但redux-saga
不仅仅是异步派发action
,它拥有强大的异步数据流处理功能,几乎改变了整个redux
的使用方式,是个重量级的家伙,如果是庞大且复杂的项目,推荐使用redux-saga
redux
本身并不与react
绑定,你依然可以把redux
与 vue、angular 等其他框架一起使用。为了使redux
与react
开发时更流畅,可以使用react-redux
把两者链接起来,这样开发体验更佳- 当在一个大型项目中使用以上的架构,就会使项目变得异常复杂和不可控(比如目录结构、
action
定义方式等),这时就需要用dva
来简化数据流操作,降低项目的复杂度 - 以上涉及的都是代码层面的架构,如果搭配
umi
一起使用,会有更佳的开发体验。umi
内部使用 roadhog(webpack 封装库), 具有动态路由、dva model
的自动加载、通过插件支持 PWA(Progressive Web App)、以路由为单元的 code splitting 等
总结:
- 简单页面直接用
react
,如果需要本地路由功能再加react-router
- 如果需要跨组件通信、共享数据的话,不太复杂的页面可以用
redux
+redux-thunk
,复杂的页面可以用redux
+redux-saga
- 复杂大型应用(比如整个项目就是一个单页面应用),可以用
react
+react-router
+redux
+redux-saga
+react-redux
+dva
+umi
2. 一些扩展的可选架构
2.1 styled-components
使用 styled-components
,可以把 css
样式代码写到 js
文件中。
一般来说,写一个 react
组件,需要如下的结构:
- ComponentA.js
- ComponentA.css
- ComponentB.js
- ComponentB.css
- ...
# ComponentA.css
.container {
padding: 10px;
}
# ComponentA.js
import styles from './ComponentA.css';
export default props => (
<div className={styles.container}>
{props.children}
</div>
);
使用 styled-components
后,就可以去掉 css
文件:
- ComponentA.js
- ComponentB.js
- ...
# ComponentA.js
import styled from 'styled-components';
const Container = styled.div`
padding: 10px;
`;
export default props => (
<Container>
{props.children}
</Container>
);
2.2 recompose
写了大量 react
组件之后(特别是使用 redux
+ react-redux
之后,组件的 state
已经被剥离出去),感觉使用类声明式(class
)写 react
组件其实并非最好的方式,而使用函数式组件会更佳:
- 函数式组件逻辑更清晰
- 避免
state
被滥用
类声明式写法:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
}
setCounter(cb) {
const { counter } = this.state;
setState({
counter: cb(counter),
});
}
render() {
const { counter } = this.state;
const setCounter = this.setCounter;
return (
<div>
Count: {counter}
<button onClick={() => setCounter(n => n + 1)}>Increment</button>
<button onClick={() => setCounter(n => n - 1)}>Decrement</button>
</div>
);
}
}
函数式写法:
import { withState } from 'recompose'
const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
<div>
Count: {counter}
<button onClick={() => setCounter(n => n + 1)}>Increment</button>
<button onClick={() => setCounter(n => n - 1)}>Decrement</button>
</div>
)
相比较而言,函数式写法要清晰很多呢。
2.3 react-loadable
有些时候,我们想要动态的加载一些组件(按需加载),比如在一个单页面应用中:
- pages
- PageA.js # a 页面的组件
- PageB.js # b 页面的组件
- PageC.js # c 页面的组件
- ...
只有真正要实例化当前页面的时候,才会去加载相应的组件。使用 react-loadable
封装原来的组件,然后使用封装后的组件,就像使用原来的组件一样,react-loadable
会自动帮我们处理脚本加载。
import Loadable from 'react-loadable';
import Loading from './loading-component'; # 页面组件还没有加载成功时,显示一个 loading 组件
const LoadableComponent = Loadable({
loader: () => import('./real-component-a'), # 动态加载真正的 A 组件
loading: Loading,
});
export default class ComponentA extends React.Component { # 封装后的组件,使用方式与原来一致
render() {
return <LoadableComponent/>;
}
}
3. 选择 UI 框架
使用一个现成的 UI 框架,可以少写很多代码。
目前比较推荐的是:
- ant-design + ant-design-mobile: 蚂蚁金服出品
- material-ui: google 材质设计的实现
- Semantic-UI-React: Semantic-UI for
react
- blueprint: 一套比较好用针对移动端的 UI 框架
4. 服务器端渲染
服务器端渲染用得最多的是 next.js,其他可供选择的有 razzle、react-server、beidou。
一般这些框架都会有一些目录结构、书写方式、组件集成、项目构建的要求,自定义属性可能不是很强。
以 next.js 为例,整个应用中是没有 html
文件的,所有的响应 html
都是 node 动态渲染的,包括里面的元信息、css, js
路径等。渲染过程中,next.js
会根据路由,将首页所有的组件渲染成 html
,余下的页面保留原生组件的格式,在客户端渲染。
更多参考:细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)
5. 开发工具
开发时主要会用到的工具。
5.1 storybook
storybook
为组件开发搭建了一个强大的开发环境,并提供了以下的几个功能:
- 提供了一个强大的 UI 组件管理页面,可以很便捷、清晰的分组、管理多个组件或一个组件的多个不同状态
- 在自动化交互测试之外,可以很方便的进行手动交互测试,并且可以动态改变组件参数,查看视图变化
- 可以将组件预览导出为静态资源,这样就可以很方便查看组件的文档和不同参数对应的不同视图
- 还有一系列的插件,提供了很多额外的功能,帮助你更好的开发、测试、优化组件
社区已经有很多组件库都在使用 storybook 开发,比如:
- react-dates 的
storybook
react-dates - storybook - react-native-web 的
storybook
react-native-web - storybook
更多参考:react、vue 组件开发利器:storybook
5.2 react-devtools
这是专门针对 react
组件开发的 chrome 开发者工具插件,就像开发者工具的 Elements
一样,可以查看整个页面的 react
组件树和每个组件的属性和状态,并且可以动态的更改属性和状态,然后会更新 UI 到应用上。
安装
通过 chrome 应用商店安装 chrome - react-developer-tools.
其他安装方式查看 react-devtools.
5.3 redux-devtools 与 redux-devtools-extension
这是专门针对 redux
开发的 chrome 开发者工具插件,就像 react-devtools 一样,可以查看整个页面的 redux
store 及其变化,并且可以动态的派发 action
,然后会更新 UI 到应用上。
5.3.1 安装 redux-devtools
这种安装方式,redux-devtools
会嵌入到页面中,成为页面的一部分。
npm install --save-dev redux-devtools
# 还可以安装
npm install --save-dev redux-devtools-log-monitor
npm install --save-dev redux-devtools-dock-monitor
更多信息参考 redux-devtools - Walkthrough.
5.3.2 安装 redux-devtools-extension
这种安装方式是成为浏览器开发者工具的一个插件。
通过 chrome 应用商店安装 chrome - redux-devtools.
其他安装方式查看 redux-devtools-extension.
6. 测试
一般 react
组件的测试,会用 enzyme + jest,jest
用来测试 JavaScript,enzyme 用来测试 react
组件。
另外,可以使用 react-testing-library 代替 react-dom/test-utils
,达到更佳的测试体验。
7. 替代库
如果你对组件的性能、虚拟 DOM 的算法有极致的追求,可以尝试 react
的替代库,如:
8. 插件库
一些很实用的插件库:
- react-motion: 动画组件
- react-select: 下拉选择组件
- reselect:
redux
的路径选择器 - react-beautiful-dnd: 拖拽组件
- react-canvas: canvas 组件
- redux-form:
redux
与表单绑定 - recharts: D3 的
react
封装 - react-dnd: 又一个拖拽组件
- react-helmet: document head 区域管理器
后续
更多博客,查看 https://github.com/senntyou/blogs
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
react 前端项目技术选型、开发工具、周边生态的更多相关文章
- .net项目技术选型总结
做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作为参考. 数据库 小型项目:SQLite(工具) 中大型项目: ...
- (转).net项目技术选型总结
原文作者:mcgrady 原文地址:.net项目技术选型总结 做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作 ...
- 前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践
05.产品前端架构 第1章--协作流程 WEB系统 角色定义 协作流程 职责说明 第2章--接口设计 概述 接口规范 规范应用 本地开发 第3章--版本管理 见 Java开发工程师(Web方向) - ...
- Android官方技术文档翻译——开发工具的构建概述
本文译自Android官方技术文档<Build Overview>,原文地址:http://tools.android.com/build. 因为<Android Lint Chec ...
- MQTT 1——物联网集成项目技术选型与说明
最近做的JAVA项目与物联网设备有集成,记录一下从技术选型到实现,整合: 1.通信协议技术选型,MQTT技术介绍2.MQTT服务端安装,客户端测试3.MQTT客户端与Spring MVC整合 1.项目 ...
- 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...
- web前端不可错过的开发工具–Adobe Brackets
Adobe Brackets是一个开源的基于HTML/CSS/JavaScript开发,运行在native shell上的集成开发环境.该项目由Adobe创建和维护,根据MIT许可证发布.提供Wind ...
- Android开源项目发现--- 效率开发工具篇(持续更新)
1.Json2Java 根据JSon数据自动生成对应的Java实体类,还支持Parcel.Gson Annotations对应代码自动生成.期待后续的提取父类以及多url构建整个工程的功能 项目地址: ...
- 2019年java大型项目技术选型
学习一下 1,公司使用的架构是:SpringCloud + K8S 这一套主流技术,但是还是入门级别的. 还包含apollo ,xxlJob ,SkyWalking,Cat,GrayLog等 2,G ...
随机推荐
- 珍珠x
题目描述 有n颗形状和大小都一致的珍珠,它们的重量都不相同.n为整数,所有的珍珠从1到n编号.你的任务是发现哪颗珍珠的重量刚好处于正中间,即在所有珍珠的重量中,该珍珠的重量列(n+1)/2位.下面给出 ...
- java jts
来自:UCMapForOpenGIS https://bbs.csdn.net/topics/380204896?list=992863 对比 其实geotools就是基于jts开发的,而geoser ...
- oracle11g安装补丁升级
检查当前数据库CPU和PSU补丁信息 方法一: 登录数据库,检查DBA_REGISTRY_HIST视图. SYS@orcl> select *from dba_registry_history; ...
- wannafly 练习赛11 B 假的字符串(字典树+建边找环)
链接:https://www.nowcoder.com/acm/contest/59/B 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit ...
- http://www.malware-traffic-analysis.net/2018/index.html
http://www.malware-traffic-analysis.net/2018/index.html
- RAC_单实例_DG 关于两端创建表空间数据文件路径不一致的问题注意点
RAC_单实例_DG 关于两端创建表空间数据文件路径不一致的问题注意点 主库SYS@orcl1>show parameter db_file_name_convert NAME TYPE VAL ...
- 3、Shiro授权
Shiro授权过程和认证过程相似: 项目结构: package com.shiro.shiroframe; import org.apache.shiro.SecurityUtils; import ...
- ffmpeg mp4 to wmv and wmv to mp4
//大小=>变小ffmpeg -i 1.mp4 -b:v 2M -vcodec msmpeg4 -acodec wmav2 1_mp4.wmv//大小=>变大ffmpeg -i 1.mp4 ...
- 32 位bitmap 内存存储 顺序 bgra 前3位 与23位一致。 都是 bgr 呵呵 与rgb 相反
32 位bitmap 内存存储 顺序 bgra 前3位 与23位一致. 都是 bgr 呵呵 与rgb 相反
- 笨办法学python 13题:pycharm 运行
笨办法学python 13题 代码: # -*- coding: utf-8 -*- from sys import argv # argv--argument variable 参数变量 scrip ...