Bruce Chen's Blog

一、Mobx 解决的问题

传统 React 使用的数据管理库为 Redux。Redux 要解决的问题是统一数据流，数据流完全可控并可追踪。要实现该目标，便需要进行相关的约束。Redux 由此引出了 dispatch action reducer 等概念，对 state 的概念进行强约束。然而对于一些项目来说，太过强，便失去了灵活性。Mobx 便是来填补此空缺的。

这里对 Redux 和 Mobx 进行简单的对比：

1. Redux 的编程范式是函数式的而 Mobx 是面向对象的；

2. 因此数据上来说 Redux 理想的是 immutable 的，每次都返回一个新的数据，而 Mobx 从始至终都是一份引用。因此 Redux 是支持数据回溯的；

3. 然而和 Redux 相比，使用 Mobx 的组件可以做到精确更新，这一点得益于 Mobx 的 observable；对应的，Redux 是用 dispath 进行广播，通过 Provider 和 connect 来比对前后差别控制更新粒度，有时需要自己写 SCU；Mobx 更加精细一点。

二、 Mobx 核心概念

Mobx 的核心原理是通过 action 触发 state 的变化，进而触发 state 的衍生对象（computed value & Reactions）。

State

在 Mobx 中，State 就对应业务的最原始状态，通过 observable 方法，可以使这些状态变得可观察。

通常支持被 observable 的类型有三个，分别是 Object, Array, Map；对于原始类型，可以使用 Obserable.box。

值得注意的一点是，当某一数据被 observable 包装后，他返回的其实是被 observable 包装后的类型。

1
2
3
4
5
6

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const obArray = observable([1, 2, 3]);
console.log("ob is Array:", Array.isArray(obArray));
console.log("ob:", obArray);

控制台输出为：

1
2
3

ob is Array: false
ob: ObservableArray {}

对于该问题，解决方法也很简单，可以通过 Mobx 原始提供的 observable.toJS()转换成 JS 再判断，或者直接使用 Mobx 原生提供的 APIisObservableArray 进行判断。

computed

Mobx 中 state 的设计原则和 redux 有一点是相同的，那就是尽可能保证 state 足够小，足够原子。这样设计的原则不言而喻，无论是维护性还是性能。那么对于依赖 state 的数据而衍生出的数据，可以使用 computed。

简而言之，你有一个值，该值的结果依赖于 state，并且该值也需要被 observable，那么就使用 computed。

通常应该尽可能的使用计算属性，并且由于其函数式的特点，可以最大化优化性能。如果计算属性依赖的 state 没改变，或者该计算值没有被其他计算值或响应（reaction）使用，computed 便不会运行。在这种情况下，computed 处于暂停状态，此时若该计算属性不再被 observable。那么其便会被 Mobx 垃圾回收。

简单介绍 computed 的一个使用场景

假如你观察了一个数组，你想根据数组的长度变化作出反应，在不使用 computed 时代码是这样的

1
2
3
4
5
6
7
8
9
10

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
autorun(() => console.log(numbers.length));
// 输出 '3'
numbers.push(4);
// 输出 '4'
numbers[0] = 0;
// 输出 '4'

最后一行其实只是改了数组中的一个值，但是也触发了 autorun 的执行。此时如果用 computed 便会解决该问题。

1
2
3
4
5
6
7
8
9
10

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
var sum = computed(() => numbers.length);
autorun(() => console.log(sum.get()));
// 输出 '3'
numbers.push(4);
// 输出 '4'
numbers[0] = 1;

autorun

另一个响应 state 的 api 便是 autorun。和 computed 类似，每当依赖的值改变时，其都会改变。不同的是，autorun 没有了 computed 的优化（当然，依赖值未改变的情况下也不会重新运行，但不会被自动回收）。因此在使用场景来说，autorun 通常用来执行一些有副作用的。例如打印日志，更新 UI 等等。

action

在 redux 中，唯一可以更改 state 的途径便是 dispatch 一个 action。这种约束性带来的一个好处是可维护性。整个 state 只要改变必定是通过 action 触发的，对此只要找到 reducer 中对应的 action 便能找到影响数据改变的原因。强约束性是好的，但是 Redux 要达到约束性的目的，似乎要写许多样板代码，虽说有许多库都在解决该问题，然而 Mobx 从根本上来说会更加优雅。

首先 Mobx 并不强制所有 state 的改变必须通过 action 来改变，这主要适用于一些较小的项目。对于较大型的，需要多人合作的项目来说，可以使用 Mobx 提供的 api configure 来强制。

1

Mobx.configure({enforceActions: true})

其原理也很简单

1
2
3
4
5
6
7

function configure(options){
    if (options.enforceActions !== undefined) {
        globalState.enforceActions = !!options.enforceActions
        globalState.allowStateChanges = !options.enforceActions
    }
}

通过改变全局的 strictMode 以及 allowStateChanges 属性的方式来实现强制使用 action。

三、Mobx 异步处理

和 Redux 不同的是，Mobx 在异步处理上并不复杂，不需要引入额外的类似 redux-thunk、redux-saga 这样的库。

唯一需要注意的是，在严格模式下，对于异步 action 里的回调，若该回调也要修改 observable 的值，那么

该回调也需要绑定 action。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;

  @action
  changeA() {
    this.a = 0;
    setTimeout(this.changeB, 1000);
  }
  @action.bound
  changeB() {
    this.a = 1000;
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

这里用了 action.bound 语法糖，目的是为了解决 javascript 作用域问题。

另外一种更简单的写法是直接包装 action

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;
  @action
  changeA() {
    this.a = 0;
    setTimeout(action('changeB',()=>{
      this.a = 1000;
    }), 1000);
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

如果不想到处写 action，可以使用 Mobx 提供的工具函数 runInAction 来简化操作。

1
2
3
4
5
6
7
8
9
10
11
12

...
 @action
  changeA() {
    this.a = 0;
    setTimeout(
      runInAction(() => {
        this.a = 1000;
      }),
      1000
    );
  }
...

通过该工具函数，可以将所有对 observable 值的操作放在一个回调里，而不是命名各种各样的 action。

最后，Mobx 提供的一个工具函数，其原理 redux-saga，使用 ES6 的 generator 来实现异步操作，可以彻底摆脱 action 的干扰。

1
2
3
4
5
6

@asyncAction
  changeA() {
    this.a = 0;
    const data = yield Promise.resolve(1)
    this.a = data;
  }

四、Mobx 原理分析

autorun

Mobx 的核心就是通过 observable 观察某一个变量，当该变量产生变化时，对应的 autorun 内的回调函数就会发生变化。

1
2
3
4
5
6
7
8

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const ob = observable({ a: 1, b: 1 });
autorun(() => {
  console.log("ob.b:", ob.b);
});

ob.b = 2;

执行该代码会发现，log 了两遍 ob.b 的值。其实从这个就能猜到，Mobx 是通过代理变量的 getter 和 setter 来实现的变量更新功能。首先先代理变量的 getter 函数，然后通过预执行一遍 autorun 中回调，从而触发 getter 函数，来实现观察值的收集，依次来代理 setter。之后只要 setter 触发便执行收集好的回调就 ok 了。
具体源码如下：

1
2
3
4
5
6
7
8

function autorun(view, opts){
    reaction = new Reaction(name, function () {
           this.track(reactionRunner);
    }, opts.onError);
   function reactionRunner() {
        view(reaction);
    }
}

autorun 的核心就是这一段，这里 view 就是 autorun 里的回调函数。具体到 track 函数，比较关键到代码是：

1
2
3

Reaction.prototype.track = function (fn) {
    var result = trackDerivedFunction(this, fn, undefined);
}

trackDerivedFunction 函数中会执行 autorun 里的回调函数，紧接着会触发 observable 中代理的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13

function generateObservablePropConfig(propName) {
    return (observablePropertyConfigs[propName] ||
        (observablePropertyConfigs[propName] = {
            configurable: true,
            enumerable: true,
            get: function () {
                return this.$mobx.read(this, propName);
            },
            set: function (v) {
                this.$mobx.write(this, propName, v);
            }
        }));
}

在 get 中会将回调与其绑定，之后更改了 observable 中的值时，都会触发这里的 set，然后随即触发绑定的函数。

五、Mobx 的一些坑

通过 autorun 的实现原理可以发现，会出现很多我们想象中应该触发，但是没有触发的场景，例如：

1. 无法收集新增的属性

1
2
3
4
5
6
7
8
9

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
autorun(() => {
  if(ob.c){
    console.log("ob.c:", ob.c);
  }
});
ob.c = 1

对于该问题，可以通过 extendObservable(target, props)方法来实现。

1
2
3
4
5
6
7
8
9
10

const Mobx = require("mobx");
const { observable, autorun, computed, extendObservable } = Mobx;
var numbers = observable({ a: 1, b: 2 });
extendObservable(numbers, { c: 1 });
autorun(() => console.log(numbers.c));
numbers.c = 3;

// 1

// 3

extendObservable 该 API 会可以为对象新增加 observal 属性。

当然，如果你对变量的 entry 增删非常关心，应该使用 Map 数据结构而不是 Object。

2. 回调函数若依赖外部环境，则无法进行收集

1
2
3
4
5
6
7
8
9
10
11

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
let x = 0;
autorun(() => {
  if(x == 1){
    console.log("ob.c:", ob.b);
  }
});
x = 1;
ob.b = 2;

很好理解，autorun 的回调函数在预执行的时候无法到达 ob.b 那一行代码，所以收集不到。

1.路径匹配问题：

In Nuxt.js, the path match is as follows:

1

@import url('~assets/css/style.css') //Error

This path matching is an error, and writing it like this is possible:

1

@import url('~/assets/css/style.css') //success

也就是说，在最新版本更新中，官方修复了路径匹配问题：

而官方推荐使用~/assets匹配路径，而不是使用在中文文档中的~assets去匹配路径。

而在中文文档中，也并未见修复及更改此问题。

2.按需引入(UI 框架等等)

例如使用 UI 框架：element-ui

我找了很多相关文章，并没有详细说明该如何引入。所以我要拿出来将他说明：

先来看下，如果不按需引入 vendor.js 的体积大小为：

第一步，下载依赖：

1
2
3
4
5
6
7

# 先下载element-ui

npm install element-ui --save

# 如果使用按需引入，必须安装babel-plugin-component(官网有需要下载说明，此插件根据官网规则不同，安装插件不同)

npm install babel-plugin-component --save-dev

安装好以后，按照 nuxt.js 中的规则，你需要在 plugins/ 目录下创建相应的插件文件

在文件根目录创建(或已经存在)plugins/目录，创建名为：element-ui.js 的文件，内容如下：

1
2
3
4
5
6
7

import Vue from 'vue'

import { Button } from 'element-ui'    //引入Button按钮

export default ()=>{
    Vue.use(Button)
}

第二步，引入插件

在 nuxt.config.js 中，添加配置为：plugins

1
2
3
4
5
6

css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
'~/plugins/element-ui'
]

默认为：开启 SSR,采用服务端渲染，也可以手动配置关闭 SSR，配置为：

1
2
3
4
5
6
7
8
9

css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
    {
        src:'~/plugins/element-ui',
        ssr:false    //关闭ssr
    }
]

第三步，配置 babel 选项

在 nuxt.config.js 中，配置在 build 选项中，规则为官网规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

build: {
      babel:{        //配置按需引入规则
          "plugins":[
              [
                  "component",
                  {
                      "libraryName":"element-ui",
                      "styleLibraryName":"theme-chalk"
                  }
              ]
          ]
      },
    /*
     ** Run ESLINT on save
     */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
        })
      }
    }
 }

此时，我们在观察打包以后文件体积大小，如图：

此时，我们成功完成了按需引入配置。

3.初始化脚手架的选择：

官网提供的初始化脚手架为：

1
2
3

# 基本的Nuxt.js项目模板

vue init nuxt/starter template

而其实，官方也提供了更多的模板以便于我们使用，而我在中文文档并未发现有说明：

• nuxt/starter 基本的 Nuxt.js 项目模板
• nuxt/express Nuxt.js + Express
• nuxt/koa Nuxt.js + Koa2
• nuxt/adonuxt Nuxt.js + AdonisJS
• nuxt/micro Nuxt.js + Micro
• nuxt/nuxtent 适用于内容较重网站的 Nuxt.js + Nuxtent 模块

而我们使用基础的模板进行初始化项目，部署方式为：

第一步，打包：
在执行 npm run build 的时候，nuxt 会自动打包

第二步，选择要部署的文件：

• .nuxt 文件夹
• package.json 文件
• nuxt.config.js 文件(如果你部署一些 proxy，则需要上传这个文件，个人建议把它传上去)

  第三步，启动你的 nuxt （重要）

使用 pm2 启动你的 nuxt.js

1

pm2 start npm --name "demo" -- run start

在这里，我发现个问题，如果你使用 window server 服务器，在使用 pm2 启动时候，会出现错误，错误如下：

如果在 Linux 服务器下启动，同样的命令，同样的执行，则不会出现错误：
这里采用 Linux CentOS 7

所以，个人建议，在采用初始化模板的时候，请选用 express 或者 koa 进行初始化，理由如下：

1.采用基础模板初始化，观察 package.json 的启动方式如下：

1
2
3
4
5
6
7
8

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  }

2.采用 express/koa 初始化模板，观察 package.json 的启动方式如下：

1
2
3
4
5
6
7

"scripts": {
    "dev": "backpack dev",
    "build": "nuxt build && backpack build",
    "start": "cross-env NODE_ENV=production node build/main.js",
    "precommit": "npm run lint",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  }

在 start 中，对比下，个人觉得 express/koa 更灵活一些，它直接启动了 build/main.js 文件，更能直观的启动方式，而关键在于，也可以在 windows server 下运行起来。

注意事项：如果采用 express/ koa 的模板初始化，服务器部署的时候，同时要上传 build/目录！！！

4.插件中获取 vue 绑定

我们需要在 axios 的插件中配置 Loading 加载效果，例如使用 element-ui 框架作为示例：

1.创建插件
在文件根目录创建(或已经存在)plugins/目录，创建名为：axios.js 的文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import Vue from 'vue'

var vm = new Vue({})    //获取vue实例

export default function ({ $axios, redirect }) {

  $axios.onRequest(config => {
    if (process.browser) {    //判断是否为客户端（必须）
        vm.$loading();
    }
  })

  $axios.onResponse(response=>{
      if (process.browser) {    //判断是否为客户端（必须）
          let load = vm.$loading();
          load.close();
      }
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

如官方所说，并不需要像原生 axios一样，去 return 一个 config 出来。

2.配置 nuxt.config.js 文件
在 plugins 选项添加：

plugins:[‘~/plugins/axios’]

添加 modules 选项并添加如下示例：

modules:[‘@nuxtjs/axios’]

配置防止多次打包：

在 build 选项中(nuxt.config.js 会默认配置)添加 vendor 配置项：

1
2
3

build:{
    vendor:['axios']
}

这样就可以调用 loading 加载方法,并且愉快的使用了。

（当然还有其他的方法去调用 vue 实例，每个人习惯不同，使用方式不同。）

5.Nuxt.js 中配置代理解决跨域

我们知道在 vue-cli 中配置代理很方便，只需要在 config/目录下的 index.js 中找到 proxyTable 添加即可，而在 nuxt 中同样需要修改 nuxt.config.js 配置文件。

1.原始配置代理方式
使用@nuxtjs/axios 和@nuxtjs/proxy 进行代理解决跨域

1）.下载插件

1
2
3

# 下载插件

npm install @nuxtjs/axios @nuxtjs/proxy --save

2）.配置插件

在 nuxt.config.js 添加配置项：modules 和 proxy。

1
2
3
4
5
6
7
8
9
10
11

export default = {

    modules:[
        '@nuxtjs/axios',
        '@nuxtjs/proxy'
    ],
    proxy:[
        ['/json.html',{target:'http://www.xxxx.com'}]    //注意这也是一个数组
    ]

}

按照上面的方式已经完成了代理，可以进行跨域请求了。

2.第二种方式的代理配置

1）.下载插件

这次只需要下载@nuxtjs/axios 插件就可以。

1
2
3

# 下载插件

npm install @nuxtjs/axios --save

2）.配置插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

module.exports = {

  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    proxy:true
  },
  proxy:{
    '/api': 'http://api.example.com',
    '/api2': 'http://api.another-website.com'
  }

}

特别注意：此时，axios 选项为对象(object)，proxy 选项为对象(object)。

6.@nuxtjs/axios 的配置项

pathRewrite 选项(重写地址)

如果配置 pathRewrite 选项，可以采用第二种写法如下：

1
2
3
4
5

proxy: {

  '/api/': { target: 'http://api.example.com', pathRewrite: {'^/api/': ''} }

 }

/api/将被添加到 API 端点的所有请求中。可以使用 pathRewrite 选项删除。

因为在 ajax 的 url 中加了前缀 /api，而原本的接口是没有这个前缀的。

所以需要通过 pathRewrite 来重写地址，将前缀 /api 转为 /或者是’’。

如果本身的接口地址就有 /api 这种通用前缀，就可以把 pathRewrite 删掉。

retry 选项(自动拦截失败请求)

可以在 axios 选项中，配置 retry 配置项，自动拦截失败请求，默认为 3 次。

1
2
3

axios: {
  retry: { retries: 3 }
}

progress 选项(发出请求时显示加载栏)

与 Nuxt.js 进度条集成，在发出请求时显示加载栏。（仅在浏览器上，当加载栏可用时。）

您还可以使用 progress 配置为每个请求禁用进度条。

1

this.$axios.$get('URL', { progress: false })

baseURL 选项（服务器端默认请求地址）

在服务器端使用和预先创建请求的基本 URL。

browserBaseURL 选项（客户端默认请求地址）

在客户端使用和预先创建请求的基本 URL。

一、简介

Next.js 是一个用于 React 应用的极简的服务端渲染框架。框架中集成了 Webpack，Babel 等一系列 React 相关的工具并进行了默认的配置。因此省去了复杂的配置过程，实现了一键搭建开发环境和打包构建。同时提供了自定义配置接口，可以在默认配置的基础上对工具进行自定义配置，满足个性化需求。

二、基本用法

安装

使用 npm 安装： npm install next –save

为了方便的使用 next 提供的命令，把命令写在 package.json 文件的 scripts 中：

1
2
3
4
5
6
7
8

{
  "scripts": {
    "dev": "next",  // 运行开发服务器，并监控源代码，具备hod reload功能
    "build": "next build", // 以生产模式打包代码
    "start": "next start"  // 启动Next服务器，可以自定义服务器和端口
    "init": "next init" // 初始化项目，创建基础的文件夹和index页面文件
  }
}

之后，在项目的根目录下创建 pages 文件夹和 static 文件夹，分别用来放对应的页面资源和静态资源。

Note：也可以使用 npm run init 命令自动生成。

运行

如果使用 npm run init 命令的话，现在 pages 文件夹下已经有了 index.js 文件，如果是手动创建 pages 文件夹的话，现在在该文件下创建一个 index.js 文件，内容为：

1

export default () => <p>Hello, world</p>

接着执行 npm run dev 命令并在浏览器中打开 http://localhost:3000。

现在，就得到了一个采用服务端渲染的极简 React 应用，这个应用还实现了自动代码分割，保证每个页面只会加载自身的依赖，不会有依赖冗余。

Next 的核心就是 pages 和 static 文件夹。其中 pages 文件夹用于存放每个页面的顶层组件，static 用于存放项目中的静态资源。

Next 会将 pages 中的文件结构自动映射为对应的路由结构，例如现在该文件夹下有两个文件:pages/index.js 和 pages/about.js。则对应的路由分别为/和/about。并且支持多级目录，例如 page/foo/bar.js 对应的路由为/foo/bar。

static 文件夹用来存放静态文件，例如现在有一个图片文件 static/image.png，使用的时候引用/static/image.png 就可以了：

1
2
3

export default () => (
  <img src="/static/image.png" />
)

打包完成后，Next 会在项目根目录生成一个.next 文件夹，其中的两个文件夹 dist 和 bundles，dist 文件夹中存放着编译后的源代码，用于服务端渲染。bunldes 文件夹中存放着 pages 中每个页面打包后的整体代码的 JSON 格式。在应用的初始页面，会使用 dist 文件夹中的代码进行服务端渲染，而其他使用路由到达的页面，则将 bundles 文件夹中的对应 JSON 格式的代码返回客户端执行渲染。

Next 的出现大大简化了 React 应用开发的配置和构建工作，使开发者能够专注于组件的开发，而不需要在 Webpack，Babel 等工具上花费过多的精力。基于简单的文件系统，就可以创建包含路由功能和服务端渲染的 React 应用。需要注意的是：创建的应用中只有初始页面采用服务端渲染，其他通过路由操作到达的页面均为客户端渲染。

组件

Next 对 React 组件的 getInitialProps 生命周期方法做了改造，传入一个上下文对象，该对象在服务端渲染和客户端渲染时，具有不同的属性：

• req: HTTP 请求对象（服务端渲染独有）
• res: HTTP 响应对象（服务端渲染独有）
• pathname: URL 中的路径部分
• query：URL 中的查询字符串部分解析出的对象
• err：错误对象，如果在渲染时发生了错误
• xhr：XMLHttpRequest 对象（客户端渲染独有）

因此，可以在组件的 getInitialProps 方法中处理上下文对象，控制传入组件的 props 数据。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

上面的例子根据是否有 req 对象来判断是服务端渲染还是客户端渲染，然后采用对应的方式取得用户代码数据并传入组件的 props 中。

获取数据

组件的 getInitialProps 还可以用来获取数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React, { Component } from 'react';
import 'isomorphic-fetch';

export default class extends Component {
  static async getInitialProps() {
    const res = await fetch('https://api.github.com/repos/zeit/next.js');
    const json = await res.json();
    return {
      stars: json.stargazers_count
    };

  }

  render() {
    return <div>{this.props.stars}</div>
  }
}

需要注意的一点是，getInitialProps 方法执行完毕之后，才会执行组件的 render 方法。这也就导致了如果网络状况不佳的情况下，会出现长时间的等待。并且只有每个页面的顶层组件的 getInitialProps 会被执行，所以想在子组件中获取数据的话只能在其他生命周期函数例如 componentDidMount 配合组件的 state 实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stars: 0
    }
  }

  async componentDidMount() {
    const res = await fetch('https://api.github.com/repos/zeit/next.js');
    const json = await res.json();
    this.setState({
      stars: json.stargazers_count
    });
  }

  render() {
    return <div>{this.state.stars}</div>
  }
}

三、CSS

NEXT 组件中声明 CSS，目前主要有两种方式：

1. 内嵌 CSS
2. CSS-in-JS

内嵌（Built-in）CSS

Next 采用的内嵌 CSS 方案是 styled-jsx 库，也是 Next 所推荐的 CSS 声明方式。优点是具有组件级的独立作用域，避免了样式污染问题。并且支持完整的 CSS 功能，如:hover 等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React from 'react'

export default () => (
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      div:hover {
        background: blue;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
  </div>
)

CSS-in-JS

Next 支持多种 CSS-in-JS 方案，例如基本的在组件 style 属性中写样式：

1
2
3
4
5
6
7
8

import React from 'react'

export default () => (
  <div style={{color: red}}>
    Hello world
  </div>
)

还有其他的 CSS-in-JS 库，可以根据自己的需要和喜好灵活选择。

四、路由系统

Link 组件

Next 中提供了一个组件，用来实现路由功能。例如，我们的应用有两个页面：pages/index.js 和 pages/about.js，想要实现页面跳转，只需要：

1
2
3
4
5

// pages/index.js
import Link from 'next/link'
export default () => (
  <div>Click <Link href="/about"><a>here</a></Link> to read more</div>
)

1
2
3
4

// pages/about.js
export default () => (
  <p>Welcome to About!</p>
)

1. 获取新的组件
2. 如果新组件定义了 getInitialProps，则获取数据，如果发生错误，则渲染_error.js
3. 步骤 1，2 完成之后，执行 pushState 并渲染新组件
   每个顶层组件中还会传入一个 url 对象，提供了几个路由相关的方法：

• pathname：String-当前 URL 不包括查询字符串的 path 部分
• query：Object-当前 URL 中查询字符串解析成的对象
• back-后退
• push(url, as=url)-使用传入的 url（字符串）执行 pushState 操作
• replace(url, as=url)-使用传入的 url（字符串）执行 replaceState 操作 注意：push 和 replace 方法中的第二个参数 as 为可选项，只有在服务端配置了自定义路由才有作用。

Router 对象

除了使用组件之外，Next 还提供了一个 Router 对象满足命令式写法的需要：

1
2
3
4
5

import Router from 'next/router'

export default () => (
  <div>Click <span onClick={() => Router.push('/about')}>here</span> to read more</div>
)

与 url 对象相比，Router 对象多了一个 route 属性，值为当前的路由。 需要注意的是，Router 对象中的属性和方法仅可以在客户端部分使用，服务端渲染的页面无法使用，否则会报错。

路由事件

Router 对象还提供了三个路由事件方法：

• routeChangeStart(url) - 路由变化开始时触发
• routeChangeComplete(url) - 路由变化完成时触发
• routeChangeError(err, url) - 路由变化发生错误时触发 如果使用 Router.push(url, as)或相似的方法并传入了 as 参数，则路由事件方法中的 url 参数值为 as 的值，否则，url 参数的值是路由跳转目标的 URL

注意：与 Router 对象中其他的属性和方法不同的是，这三个路由事件方法可以在服务端渲染的页面使用。

监听路由变化：

1
2
3

Router.onRouteChangeStart = (url) => {
  console.log('App is changing to: ', url)
}

取消监听：

1

Router.onRouteChangeStart = null;

如果路由加载取消了（连续快速点击两个链接），就会触发 routeChangeError 的回调，传入的 err 参数中将包含一个 cancelled 属性，值为 true。

1
2
3
4
5

Router.onRouteChangeError = (err, url) => {
  if (err.cancelled) {
    console.log(`Route to ${url} was cancelled!`)
  }
}

五、预获取页面

Next 提供了一个基于 ServiceWorker 实现的，具有预获取页面功能的模块：next/prefetch。 使用预获取功能，可以使 APP 预加载那些可能到达的页面，提升网站的使用体验和性能。当然，前提是你的浏览器必须支持 ServiceWorker。并且预获取功能只支持应用内的页面，不支持外部链接。

组件

next/prefetch 模块也提供了一个具有预获取功能的组件，代替路由系统中的组件，使用方法一致：

1
2
3
4
5
6
7
8
9
10
11

import Link from 'next/prefetch'

export default () => (
  <nav>
    <ul>
      <li><Link href='/'><a>Home</a></Link></li>
      <li><Link href='/about'><a>About</a></Link></li>
      <li><Link href='/contact'><a>Contact</a></Link></li>
    </ul>
  </nav>
)

此外预获取功能可以精确控制到每个标签，使用 prefetch 属性来控制开关：

1

<Link href='/contact' prefetch={false}><a>Home</a></Link>

prefetch 方法

和路由器一样，预获取模块也提供了一个 prefetch 方法，用来方便命令式的写法：

1
2
3
4
5
6
7
8
9
10
11
12

import { prefetch } from 'next/prefetch'
export default ({ url }) => (
  <div>
    <a onClick={ () => setTimeout(() => url.pushTo('/dynamic'), 100) }>
      100ms后执行路由跳转
    </a>
    {
      预获取页面
      prefetch('/dynamic')
    }
  </div>
)

自定义配置

如果默认的配置无法满足需要的话，Next 还提供了诸多的自定义配置接口，可以根据自己的需求灵活配置。

自定义服务器和路由

默认的服务器和路由系统可能无法满足需要，比如，我需要把/a 的路由解析到 pages/b.js，把/b 的路由解析到 pages/a.js，此时，就需要通过自定义，手动控制页面渲染来实现，在项目根目录下创建 server.js 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// server.js

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/b', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/a', query)
    } else {
      handle(req, res, parsedUrl)
    }
  })
  .listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

你可以选择自己喜欢的服务端框架，express 或者 koa 等，进行自定义。

自定义

Next 提供了组件，可以自定义页面标签中的内容。每个组件都可以在内部自定义的内容：

1
2
3
4
5
6
7
8
9
10

import Head from 'next/head'
export default () => (
  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <p>Hello world!</p>
  </div>
)

每个页面组件只需要定义本页面需要的内容，并且对于相同的标签，例如