开发者学堂课程【React前端开发入门与实战：使用 React 构建复杂页面 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/365/detail/4361
使用 React 构建复杂页面
实例演示
如果做一个比较复杂的多页面的话，用这种模式要怎么做？
这个是一个最常见的一个应用类的，它的左边有一个菜单，右边是一个主内容，如果我们点某个省的话，就会在边上有这个省的信息，信息会自动出来，这个可能会非常复杂，可能这种东西的话会有时候正常通过页面完成。
在左侧一列是菜单，现在这就是一个全新的页面，通过用这个模式，或是这种形式的话，这就只是一个页面，但是需要通过 IC 来进行切换，以当前这个状态不会放到网页链接里面。
由于 IC 会发生变化，会导致这整个页面就不会刷新，另外这个页面是用到了一个 js ，所看到的就不会有多个页面。
一个旧的东西，但是如果使用 react 的话，做这种东西就是非常简单，不像以前那么麻烦。
那么以前为什么不做一个单页面？
这是因为在以前它做起来非常麻烦，逻辑没法做隔离之类的问题，而现在使用 react 这种语言说话可以很容易做这种隔离。
上图就是淘宝的一个简单演示，是淘宝网的样子。
淘宝网就是一个打开后，一个首页里有一个搜索框，搜索框然后如图进行一个搜索
搜索一点就会跳到一个列表，然后可以翻页，如下图
这就是淘宝，其实淘宝会有很多的页面，在这里是只要一个页面，就是把这种状态就放在这里，发现都是可以的，速度是非常快，因为所需要的角色数量少。
然后如何实现列表的内容？
以下代码就是我们的入口。
import{ Router } from 'react-router';
import 'antd/lib/index.css';
import Search from‘./Search';
import List from‘./List';
import App from'./App';
import React from'react';
const rootRoute=[{
path:'/',
indexRoute :{component:Search},
component:App,
childRoutes :[
{
path:'/list/ːq',
component;List,
},
],
}];
Path 是要定义一个 ur 关系就像写后端一样，只不过后端是把一个 ur 一定制到一个 conponent 上里面去。
如果做单页面应用纯前端，需要把一个 ur 应用到组件上去，’/’是首页，app 的话是首页还有一个子组件，点击搜索之后会调入到list页面。List 页面它也是一个APP，这就会进到一个 APP 组件里面去，不过它的组件是 list 的嵌入的一个 APP，是将 list 嵌到 APP 里面去，这就是一个 ur。
对于以前可能写在后端的，这样处在中间的话就写在中间端，因为是 app。
app 就是相当于 layout 概念，也就是说淘宝网是一个头，而里面这个内容是可以随便进的。
search 或者是这个 list ，是会变的。
这个变是根据 ur 改变的，这个 ur 会嵌入 list 的空间，当是首页的话会嵌入到 search 的空间。
所以在这里不会嵌入组件，这个组件需要嵌的内容就在前面那个 ur 钉钉里面之间的，这就是 list 的组件。
search 组件，如果渲染的话，就会渲染逻辑搜索框，点完之后页面就会不断跳转，跳转之后会到达 list 的地址上面去，之后会在 list 组件上用到 table 组件。
第一次的话回取数据，取完数据之后就开始 setdata 渲染，渲染出来的是一个 table。
这个点进来之后跳到了第4个组件，会发现这时上面有个 table，甚至是有两个页面，每次有图片下面这都是数据，分页图都是自动的。
