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

简介: react 前端项目技术选型、开发工具、周边生态声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识主架构:react, react-router, redux, redux-thunk, r...

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 绑定,你依然可以把 reduxvueangular 等其他框架一起使用。为了使 reduxreact 开发时更流畅,可以使用 react-redux 把两者链接起来,这样开发体验更佳
  6. 当在一个大型项目中使用以上的架构,就会使项目变得异常复杂和不可控(比如目录结构、action 定义方式等),这时就需要用 dva 来简化数据流操作,降低项目的复杂度
  7. 以上涉及的都是代码层面的架构,如果搭配 umi 一起使用,会有更佳的开发体验。umi 内部使用 roadhog(webpack 封装库), 具有动态路由、dva model 的自动加载、通过插件支持 PWA(Progressive Web App)、以路由为单元的 code splitting 等

总结:

  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 文件中。

一般来说,写一个 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>
)

相比较而言,函数式写法要清晰很多呢。

更多参考:通过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 框架,可以少写很多代码。

目前比较推荐的是:

4. 服务器端渲染

服务器端渲染用得最多的是 next.js,其他可供选择的有 razzlereact-serverbeidou

一般这些框架都会有一些目录结构、书写方式、组件集成、项目构建的要求,自定义属性可能不是很强。

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-devtoolsredux-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 + jestjest 用来测试 JavaScript,enzyme 用来测试 react 组件。

另外,可以使用 react-testing-library 代替 react-dom/test-utils,达到更佳的测试体验。

7. 替代库

如果你对组件的性能、虚拟 DOM 的算法有极致的追求,可以尝试 react 的替代库,如:

8. 插件库

一些很实用的插件库:

后续

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

作者:深予之 (@senntyou)

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

相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
77 9
|
27天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
101 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
1月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
33 1
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
145 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
27 1
|
2月前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
193 1
引领前端未来:React 19的重大更新与实战指南🚀
|
1月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
38 2
|
1月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
64 2
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
36 2