react相关技术总结

react相关技术总结

• react中文文档

脚手架

• created-react-app

Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。基本上需要自己去搭建项目结构，许多东西都不包括。

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

• dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

├── mock                    # 存放用于 mock 数据的文件
├── node_modules
├── package.json
├── public                  # 一般用于存放静态文件，打包时会被直接复制到输出目录(./dist)
├── src
    ├── asserts             # 用于存放静态资源，打包时会经过 webpack 处理
    ├── components          
    ├── models
    ├── routes
    ├── services
    ├── utils
    ├── router.js
    ├── index.js            # 项目的入口文件
    └── index.css           # 一般是共用的样式
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .roadhogrc.mock.js      # Mock配置文件
├── .webpackrc              # 自定义的webpack配置文件，JSON格式，如果需要 JS 格式，可修改为 .webpackrc.js

• umijs

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有 50+ 的插件。

.
├── dist/                          # 默认的 build 输出目录
├── mock/                          # mock 文件所在目录，基于 express
├── config/
    ├── config.js                  # umi 配置，同 .umirc.js，二选一
└── src/                           # 源码目录，可选
    ├── layouts/index.js           # 全局布局
    ├── pages/                     # 页面目录，里面的文件即路由
        ├── .umi/                  # dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       # build 临时目录，会自动删除
        ├── document.ejs           # HTML 模板
        ├── 404.js                 # 404 页面
        ├── page1.js               # 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          # 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               # 页面 2，任意命名
    ├── global.css                 # 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  # 可以在这里加入 polyfill
    ├── app.js                     # 运行时配置文件
├── .umirc.js                      # umi 配置，同 config/config.js，二选一
├── .env                           # 环境变量
└── package.json

数据流工具

• flux

Flux 的核心就是一个简单的约定：视图层组件不允许直接修改应用状态，只能触发 action。应用的状态必须独立出来放到 store 里面统一管理，通过侦听 action 来执行具体的状态操作。所谓的单向数据流，就是当用户进行操作的时候，会从组件发出一个 action，这个 action 流到 store 里面，触发 store 对状态进行改动，然后 store 又触发组件基于新的状态重新渲染。

• redux

Redux 可以看作是 Flux 的一次进化。Redux遵循以下三个基本原则：1、整个应用只有唯一一个可信数据源，也就是只有一个 Store。 2、State 只能通过触发 Action 来更改。 3、State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer

而且要与react-redux连用，将store传入Provider中，使用cnnect连接action和state。

• mobox

简单、可扩展的状态管理。MobX 是由 Mendix、Coinbase、Facebook 开源和众多个人赞助商所赞助的。

服务端渲染

• nextjs

Next.js 是一个轻量级的 React 服务端渲染应用框架。

多端统一

• react-native

React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。就是能实现兼容安卓和ios的app，但是原理是webview的形式，性能不太好，现在最新的hybrid技术由谷歌发布的flutter可以接近原生性能。

├── android目录	        # Android项目目录，包含了使用AndroidStudio开发项目的环境配置文件；
├── ios目录	            # iOS项目目录，包含了XCode的环境
├── node_modules目录	  # 基于node文件依赖系统产生的相关依赖和第三方lib
├── index.js	          # ios或android的入口，已经使用index.js代替index.ios.js/index.android.js，android中配置application文件的getJSMainModuleName()配置入口
├── app.json	          # app的json文件
├── package.json	      # 项目基本信息以及依赖信息
├── package-lock.json	  # npm install生成的文件，记录当前npm package的信息
├── App.js	            # 相当于Android的MainActivity，可以根据自己的需要进行修改或者删除（同时要修改index.js的注册的组件入口js文件名）
├── .babelrc	          # Babel配置文件，在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项
├── .buckconfig	        # Buck的配置文件，buck是Facebook开源的高效构建系统
├── .flowconfig	        # Flow的配置文件，flowconfig是是Flow的配置文件
├── .gitattributes	    # git配置文件，指定非文本文件的对比合并方式
├── .gitignore	        # git配置文件，用于忽略你不想提交到Git上的文件
└── .watchmanconfig	    # watchman的配置文件，watchman用于监控文件变化，辅助实现工程修改信息

• taro

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

├── config                 # 配置目录
|   ├── dev.js             # 开发时配置
|   ├── index.js           # 默认配置
|   └── prod.js            # 打包时配置
├── src                    # 源码目录
|   ├── components         # 公共组件目录
|   ├── pages              # 页面文件目录
|   |   ├── index          # index 页面目录
|   |   |   ├── banner     # 页面 index 私有组件
|   |   |   ├── index.js   # index 页面逻辑
|   |   |   └── index.css  # index 页面样式
|   ├── utils              # 公共方法库
|   ├── app.css            # 项目总通用样式
|   └── app.js             # 项目入口文件
└── package.json

ui框架

• Material-UI

谷歌提出了响应式，就是一套代码在不同的终端都有不错的显示，这套框架就是这样应运而生的。

• Ant-Design

阿里开源的ui框架，虽然出现了雪花事件，但是用户量依然庞大。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

• antd-mobile

同样是阿里开源的ui框架，用于移动端的ui架构

• mui

追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K

• weui

WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。 由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。