# react-redux-course-lecture-3

**Repository Path**: reactor/react-redux-course-lecture-3

## Basic Information

- **Project Name**: react-redux-course-lecture-3
- **Description**: 从零开始学习 React & Redux 系列第三讲
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-12-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 从 0 开始学 React 第三讲

## 开始本课程

```bash
cd ~
mkdir -p worksapce/playground/react-redux-course
cd ~/workspace/playground/react-redux-course
git clone git@git.oschina.net:reactor/react-redux-course-lecture-3.git
cd react-redux-course-lecture-3
npm i --registry=https://registry.npm.taobao.org
npm start
```

## 需求

我们现在要做一个叫 *宜人圈* 的公司内部论坛，大概有下面这些功能：

1. 访问之后，首页会展示一个 *圈子列表* （圈子就是我们平常所说的版块）
2. 点击圈子之后，进入一个新的页面，这个页面里面展示的就是这个圈子里面的所有话题列表
3. 然后我们可以点击某一个话题，就可以查看这个话题的详细信息了
4. 这话题的详情页面，我们还可以查看话题的评论以及发表一个新的评论
5. 有一个页面，可以让我发表新的话题
5. 不管我现在在哪个页面，页面上面都可以显示下面这几个东西：
  - 有一个按钮，我点击之后就可以进入新的话题的发表页面
  - 有一个热门版块列表，不管我在哪里，都显示在页面上面

如果对上面的文字描述不是很理解，可以直接看一下下 [宜人圈](http://fm1218.yixinonline.com)，
这个里面的功能和上面的需求类似。

## 一些基础概念

### 路由器？

路由器（英语：Router，又称路径器）是一种电讯网络设备，提供路由与转送两种重要机制，可以决定数据
包从来源端到目的端所经过的路由路径（host到host之间的传输路径），这个过程称为路由；将路由器输入
端的数据包移送至适当的路由器输出端（在路由器内部进行），这称为转送。路由工作在OSI模型的第三层
——即网络层，例如网际协议（IP）。

### 其实我们应该了解的是一种叫作原则型路由的东西：

原则型路由（英语：Policy-based routing，缩写为PBR），也称为策略路由（policy route），一种
决定路由的方式，由网络管理者决定路由原则，再根据这些原则来决定路由。

当一个路由器接收到封包时，通常会被转送到封包指定的目的位址。但在某些状况下，需要根据其他原则来决
定封包要转送到何处。举例来说，网络管理员可以让这些封包转送到它的来源位址。

原则型路由，可以根据封包的大小，封包内指定的通讯协定，或是其他封包表头及封包内容的资讯，来决定路
由转送的方式。当有数个私有网络相互连结时，原则型路由对于网络管理员来说，原则型路由是相当有用的。

### 路由表？

在计算机网络中，路由表（routing table）或称路由择域信息库（RIB, Routing Information
Base），是一个存储在路由器或者联网计算机中的电子表格（文件）或类数据库。路由表存储着指向特定网
络地址的路径（在有些情况下，还记录有路径的路由度量值）。路由表中含有网络周边的拓扑信息。路由表建
立的主要目标是为了实现路由协议和静态路由选择。

在现代路由器构造中，路由表不直接参与数据包的传输，而是用于生成一个小型指向表，这个指向表仅仅包含
由路由算法选择的数据包传输优先路径，这个表格通常为了优化硬件存储和查找而被压缩或提前编译。本文将
忽略这个执行的详细情况而选择整个路径选择／传输信息子系统作为路由表来说明。

> 其实，我们今天要讲的，跟路由器啥的没啥太大的关系，只是借了一下这个概念而已，我们现在也需要用到
>
> 1. 路由器，不过是叫作 `React Router` 的路由器
> 2. 路由表，我们将使用 `React Router` 创建一份路由表
> 3. 我们的路由器并不是用于传输数据的，而是……下面细谈吧。

### 统一资源定位符

统一资源定位符（或称统一资源定位器/定位地址、URL地址等[1]，英语：Uniform / Universal
Resource Locator，常缩写为URL），有时也被俗称为网页地址（网址）。如同在网络上的门牌，是因特
网上标准的资源的地址（Address）。

我们来分析以下的URL地址：

**https://api.bang.yirendai.com/user/users?kind=referrer**

其实上面的这个地址并不完整，上面这个地址其实是下面这个地址的缩写：

**https://api.bang.yirendai.com:443/user/users?kind=referrer**

原因是 `https` 协议的默认端口号就是 `443`，所以，我们可以偷下懒，在上面的这个地址中，包括了以
下这些片段：

-   `https` ：协议，常用的还有 `http`；
-   `api.bang.yirendai.com` ：域名，也可以称为主机名，它包括：
    - `.com` ：顶级域名
    - `yirendai` ：二级域名
    - `bang` ：三级域名
    - `api` ：四级域名

    域名被用于查找真实的IP地址，这里，有点说多了。
-   `443`：端口号
-   `/user/users`：路径
-    `?kind=referrer`：查询

一个URL地址，由上面这些片段组成，当我们在做一个 Web 应用的时候，肯定是逃不了要设计URL地址的问
题，为什么叫设计URL地址呢？这个以后有机会再说。

在一个 `React` 项目中，我们通过前面两次课程，应该也都了解到了，无非就是访问一个页面，然后这个
页面加载 React 项目代码，然后项目代码执行，并把组件挂载到相应的DOM中……

在上面的 URL 地址中，`https://api.bang.yirendai.com:443` 这一部分，用于确定我们这个应用
的资源，让浏览器可以找到我们的应用，而我们今天要讲的 React Router 所能处理的，并不包含这部分，
我们能处理的是： `/user/users?kind=referrer` 这一部分。

所以，在 `React Router` 中，我们其实做的事情可以简单的被概括为：

> 根据 URL 的路径以及查询条件，判断需要在页面中展示任何组件

#### 举个栗子

就拿我们今天要做的这个应用来说吧，通过对需求的深度分析，我们能得到下面这些结论：

- 我需要有一个组件，可以叫作 `IndexPage`，这是一个页面，这个页面里面将展示出所有的圈子；
- 我还有一个组件，可以叫作 `CirclePage`，这也是一个页面，这个页面将展示出某一个圈子的所有话题；
- 另一个组件，叫作 `CreatePage`，用于提供功能，让用户可以发表新的话题
- 再另一个组件，叫作 `DetailPage`，用于展示某一个话题的详情
- 一个组件，叫作 `CreateButton`，当用户点击的时候，可以展示出添加新话题这个组件
- 一个组件，叫作 `HotTopics`，这个组件展示的是热门话题列表

我们在设计URL地址的时候，就可以像下面这样设计了：

- `/` ：应用的首页，对应的是展示 `IndexPage` 组件
- `/circle?name=CIRCLE_NAME` ：这个展示 `CirclePage` 组件，我们用 `name` 参数来确定
  要展示的是哪一个圈子
- `/create` ：这个展示 `CreatePage` 组件
- `/detail` ：这个展示 `DetailPage` 组件

好吧，其实我并不喜欢这种设计方法，其实，在我看来， 我认为更好的方法是下面这样的：

- `/` -> IndexPage
- `/circles/CIRCLE_NAME` -> 名为 CIRCLE_NAME 的圈子
- `/circles/CIRCLE_NAME/topics/TOPIC_ID` -> CIRCLE_NAME 这个圈子下面的某一个话题

或者话题的详情可以使用：

- `/topics/TOPIC_ID` -> ID 为 TOPIC_ID 的话题的详情页面

最终我们确定的URL设计是下面这样的：

- `/` -> IndexPage
- `/create` -> 创建新的话题
- `/circles/CIRCLE_NAME` -> 名为 CIRCLE_NAME 的圈子
- `/topics/TOPIC_ID` -> ID 为 TOPIC_ID 的话题的详情页面

## 创建四个页面

### IndexPage

```javascript
import React, {Component} from 'react';

export default class IndexPage extends Component {
  render() {
    return (
      <div>
        <h1>这里是宜人圈首页</h1>
      </div>
    );
  }
}
```

### CirclePage

```javascript
import React, {Component} from 'react';

export default class CirclePage extends Component {
  render() {
    return (
      <div>
        <h1>这里是圈子列表页</h1>
      </div>
    );
  }
}
```

### TopicPage

```javascript
import React, {Component} from 'react';

export default class TopicPage extends Component {
  render() {
    return (
      <div>
        <h1>这里是话题详情页</h1>
      </div>
    );
  }
}
```

### CreatePage

```javascript
import React, {Component} from 'react';

export default class CreatePage extends Component {
  render() {
    return (
      <div>
        <h1>创建新的话题</h1>
      </div>
    );
  }
}
```

### app.js

然后我们可以测试每一个页面是否真的如我们所想的会展示出来：

```javascript
import React, {Component} from 'react';

import IndexPage from './IndexPage';
import CirclePage from './CirclePage';
import TopicPage from './TopicPage';
import CreatePage from './CreatePage';

export default class App extends Component {
  render() {
    // return (<IndexPage />);
    // return (<CirclePage />);
    // return (<TopicPage />);
    return (<CreatePage />);
  }
}
```

在 `App` 组件的 `render()` 方法中，注释不同代码，可以展示不同的页面，好了，到现在为止，四个
不同的页面已经有了，下一步我们可以开始想个办法，让不同的URL地址展示不同的页面了。