简述React全家桶，Dva，Umi的理解

React 通过声明式渲染和组件化很好的胜任了 UI 层面的工作，但是没有路由功能（管理页面之间的切换）和状态容器（管理全局数据）， action 中也不能执行异步 *** 作，所以就有了 react-router 和 redux 和 thunk 。

入口文件 src/index.jsx

(整合 redux 和 thunk ，其中 ConnectedRouter 是为了把 redux 中整合的 router 数据和 react 组件的 router 数据联系起来，不然在 action 里是没办法正确跳转的)

redux 入口文件 /src/redux/index.js

(整合自己全部的 reducer ，同时整合 history 实现 action 里路由跳转)

actions 文件夹下的主要文件

/src/actions/hisotry.js

/src/actions/login.js

最后就是 app.jsx 文件（使用路由）

看到这里是不是觉得头都大了，没错，为了把 react ， router ， redux 三者完美的联系起来，需要配置的东西太多了，严重影响开发效率。所以此时 Dva 和 Umi 等 React 框架就应运而生了。

首先老惯例还是看一下官网介绍

光说不练假把式，我们快速创建一个 dva 脚手架项目看看结构

目录结构

页面连接 redux

而且还提出了极具规范性的 model

model 其实就是把所有跟 redux 相关的一个 reducer 整合在一个 model 文件里，通过 namespace 区分 model ，通过 state 存储数据，通过 subsciprtions 实现 hisotry 等监听，通过 effect 发起异步 *** 作，通过 reducer 执行同步 *** 作，简直完美！

看来 Dva 已经帮我们规或改陆划好了一切，我们只要按着官网的 API 文档，一部歼如一部搭建自己的应用就好了。

但是牛逼的前人们不安于现状， Umi 横空出世

老惯例

再一次口说无凭，我们快速创建一个 Umi 脚手架衫顷项目看看结构

umi 官网推荐用 yarn 代替 npm

目录结构

当然了， Dva 和 Umi 的功能虽然强大，但是为了很好的使用他们，我们必须花更多的时间去看官网文档，重头了解他们要如何使用，如何配置。而基于 Webpack 构建的 creat-react-app 让我们高的自由度，实现任何功能，对习惯了 webpack 的人来说有种回家的感觉。

本文主要介绍 UmiJS 的预渲染功能。

服务端渲染（Server-Side Rendering），是指由 服务端 完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。

服务端渲染，首先得有后端服务器（一般是 Node.js）才可以使用，而没有后端服务器的情况下，可以使用 预渲染 。

预渲染与服务端渲染唯一的不同点在于 渲染时机 ，服务端渲染的时机是在用户访问时执行渲染（即实时渲染，数据一般是最新的），预渲染的时机是在项目构建时，当用户访问时，数据不一定是最新的（ 如果数据没有实时性，可以直接考虑预渲染 ）。

预渲染在构建时执行渲染，将渲染后的 HTML 片段生成静态 HTML 文件。无需使用 web 服务器实时动态编译 HTML，适用于 静态站点生成 。

Umi3 在 SSR 上做了大量优化及开发体验的提升，具有以下特性：

默认情况下，服务端渲染时关闭的，可通过配置开启：

服务端渲染的数据获取方式与 SPA(单页应用) 有所不同，为了让客户端和服务端都能获取到同一份数据，Umi 提供了页面级数据的预获取。

每个页面可能有单独的数据扒启预获取逻辑，这里我们会获取页面组件上的 getInitialProps 静态方法，执行后将结果注入到该页面组件的 props 中，如：

getInitialProps 有几个固定参数：

为了结合数据流框架，我们提供了 modifyGetInitialPropsCtx 方法，由插件或应用来扩展 ctx 参数，以 dva 为例：

然后在页面中，可以获取到 store ：

同时也可以在自身应用中进行扩展：

同时可以使用 getInitialPropsCtx 将服务端参数扩展到 ctx 中，例如：

在使用的时候，就有 req 对象，不过需要注意的是，只在服务端执行时才有此参数：

则在执行 getInitialProps 方法时，除了以上两个固定参数外，还会获取到 title 和 store 参数。

关于 getInitialProps 执行逻辑和时机，需要注意：

执行 umi build ，除了正常的 umi.js 外，会多一个服务端文件： umi.server.js （相当于服务端入口文件）。然后在后端框架中，引用该文件：

render 方法稿此闭参数和返回值如下：

完美兼容客户端动态加载，配置如下：

@umijs/preset-react 插件集中已内置对标题的渲染，通过以下步骤使用：键裂

@umijs/preset-react 插件集中已内置 dva

这时候 getInitialProps(ctx) 中的 ctx 就会有 store 属性，可执行 dispatch ，并返回初始化数据。

Umi 同时支持对服务端和客户端包大小的分析

---