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

时间  2019-11-08
标签 react 前端 项目 技术 选型 开发 工具 周边 生态 栏目 React 繁體版
原文   原文链接

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

声明：这不是一篇介绍 React 基础知识的文章，须要熟悉 React 相关知识

1. 架构选型演进

  1. 若是页面比较简单，能够只用 react
  2. 若是须要本地路由功能，好比在单页面应用（SPA）中维持多个页面，而且能够本地控制路由跳转逻辑，这时就须要搭配使用 react-router
  3. 通常稍复杂的页面都会遇到一些问题：组件之间的通讯问题（好比 A 组件想要改变 B 组件的 state）、跨组件数据储存与共享问题（好比多页面购物车数据存储）。react 自己并不能很好的解决这个问题，须要搭配使用 redux
  4. redux 自己只实现了 flux 理念，以及一些基础的功能，但在使用中，还须要扩展一些功能，好比异步派发 action，这时能够选择搭配使用 redux-thunk 来解决异步派发 action 的问题。另外，也是选择 redux-saga，但 redux-saga 不单单是异步派发 action，它拥有强大的异步数据流处理功能，几乎改变了整个 redux 的使用方式，是个重量级的家伙，若是是庞大且复杂的项目，推荐使用 redux-saga
  5. redux 自己并不与 react 绑定，你依然能够把 redux 与 vue、angular 等其余框架一块儿使用。为了使 redux 与 react 开发时更流畅，可使用 react-redux 把二者连接起来，这样开发体验更佳
  6. 当在一个大型项目中使用以上的架构，就会使项目变得异常复杂和不可控（好比目录结构、action 定义方式等），这时就须要用 dva 来简化数据流操做，下降项目的复杂度
  7. 以上涉及的都是代码层面的架构，若是搭配 umi 一块儿使用，会有更佳的开发体验。umi 内部使用 roadhog(webpack 封装库)， 具备动态路由、dva model 的自动加载、经过插件支持 PWA(Progressive Web App)、以路由为单元的 code splitting 等

总结：css

  1. 简单页面直接用 react，若是须要本地路由功能再加 react-router
  2. 若是须要跨组件通讯、共享数据的话，不太复杂的页面能够用 redux + redux-thunk，复杂的页面能够用 redux + redux-saga
  3. 复杂大型应用（好比整个项目就是一个单页面应用），能够用 react + react-router + redux + redux-saga + react-redux + dva + umi

2. 一些扩展的可选架构

2.1 styled-components

使用 styled-components，能够把 css 样式代码写到 js 文件中。html

通常来讲，写一个 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 文件：vue

- 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 组件其实并不是最好的方式，而使用函数式组件会更佳：node

  • 函数式组件逻辑更清晰
  • 避免 state 被滥用

类声明式写法：react

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>
    );  
  }
}

函数式写法：webpack

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>
)

相比较而言，函数式写法要清晰不少呢。git

更多参考：经过Recompose库掌握React函数组件github

2.3 react-loadable

有些时候，咱们想要动态的加载一些组件（按需加载），好比在一个单页面应用中：web

- 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 框架，能够少写不少代码。

目前比较推荐的是：

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、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. 插件库

一些很实用的插件库：

后续

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程