react 前端项目技术选型、开发工具、周边生态

react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi扩展架构：styled-components, recompose, react-loadableUI 框架：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-helmet1. 架构选型演进如果页面比较简单，可以只用 react如果需要本地路由功能，比如在单页面应用（SPA）中维持多个页面，并且可以本地控制路由跳转逻辑，这时就需要搭配使用 react-router一般稍复杂的页面都会遇到一些问题：组件之间的通信问题（比如 A 组件想要改变 B 组件的 state）、跨组件数据储存与共享问题（比如多页面购物车数据存储）。react 本身并不能很好的解决这个问题，需要搭配使用 reduxredux 本身只实现了 flux 理念，以及一些基础的功能，但在使用中，还需要扩展一些功能，比如异步派发 action，这时可以选择搭配使用 redux-thunk 来解决异步派发 action 的问题。另外，也是选择 redux-saga，但 redux-saga 不仅仅是异步派发 action，它拥有强大的异步数据流处理功能，几乎改变了整个 redux 的使用方式，是个重量级的家伙，如果是庞大且复杂的项目，推荐使用 redux-sagaredux 本身并不与 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 + umi2. 一些扩展的可选架构2.1 styled-components使用 styled-components，可以把 css 样式代码写到 js 文件中。一般来说，写一个 react 组件，需要如下的结构：- ComponentA.js- ComponentA.css- ComponentB.js- ComponentB.css- …# ComponentA.css.container { padding: 10px;}# ComponentA.jsimport styles from ‘./ComponentA.css’;export default props => ( <div className={styles.container}> {props.children} </div>);使用 styled-components 后，就可以去掉 css 文件：- ComponentA.js- ComponentB.js- …# ComponentA.jsimport 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>)相比较而言，函数式写法要清晰很多呢。更多参考：通过Recompose库掌握React函数组件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 reactblueprint： 一套比较好用针对移动端的 UI 框架4. 服务器端渲染服务器端渲染用得最多的是 next.js，其他可供选择的有 razzle、react-server、beidou。一般这些框架都会有一些目录结构、书写方式、组件集成、项目构建的要求，自定义属性可能不是很强。以 next.js 为例，整个应用中是没有 html 文件的，所有的响应 html 都是 node 动态渲染的，包括里面的元信息、css, js 路径等。渲染过程中，next.js 会根据路由，将首页所有的组件渲染成 html，余下的页面保留原生组件的格式，在客户端渲染。更多参考：细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）5. 开发工具开发时主要会用到的工具。5.1 storybookstorybook 为组件开发搭建了一个强大的开发环境，并提供了以下的几个功能：提供了一个强大的 UI 组件管理页面，可以很便捷、清晰的分组、管理多个组件或一个组件的多个不同状态在自动化交互测试之外，可以很方便的进行手动交互测试，并且可以动态改变组件参数，查看视图变化可以将组件预览导出为静态资源，这样就可以很方便查看组件的文档和不同参数对应的不同视图还有一系列的插件，提供了很多额外的功能，帮助你更好的开发、测试、优化组件社区已经有很多组件库都在使用 storybook 开发，比如：react-dates 的 storybook react-dates - storybookreact-native-web 的 storybook react-native-web - storybook更多参考：react、vue 组件开发利器：storybook5.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-monitornpm 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 的替代库，如：preactinferno8. 插件库一些很实用的插件库：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作者：深予之 (@senntyou)版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）