# 1 为什么要使用 React 1. **开发迅速**。React 组件化的特性使得 React 可以在项目中大量复用封装好的组件，提高代码的复用率，减少了重复写相同代码的繁琐而无聊的工作 > - 原生的 JavaScript 操作 DOM 繁琐，效率低（DOM-API 操作 UI） > - 使用 JavaScript，包括 jQuery 直接操作 DOM，浏览器会进行大量的重绘和重排（虽然 jQuery 简化了操作 DOM 的步骤，但依然效率低下） > - 原生的 JavaScript 没有组件化编码方案，代码复用率低 2. **生态相对完善**。React 起源于 Facebook 的内部项目，具有相对稳定的维护，周边生态相对完善，像各种的 UI 库，路由库等，可以在更少的时间内完成更多的工作。 3. **有大公司作为背书**。除了 React 的开发公司 Faceboook 大量使用 React 外，国内外还有很多大公司也广泛应用 React，在国外有 Paypal，Airbnb 等，在国内有阿里，腾讯，字节跳动等。 4. **有强大的开源社区**。开源项目的社区非常重要，在社区开发者的贡献下会让一些开源项目变得越来越好，项目的 issue 的解决速度也会得到提升，同时还会提供大量的周边技术工具和技术博客。 # 2 React 的定义 React 的定义：用于`构建用户界面`的`JavaScript库`。 **关键字**： 1. **构建用户界面**:说明 React 专注于视图的构建，既不是一个请求库，也不是一个打包工具，而是主要提供 UI 层面的解决方案。 2. **JavaScript 库**：这说明 React 并不是一个框架，并不能解决项目中的所有问题，为了在项目中使用它，需要结合其他的库，例如 Redux/React-router 等来协助提供完整的解决方案。在这些周边生态的配合下才能组合成一个框架 > 换句话来说，React 所做的有三步 > > 1. 发送请求获得数据 > 2. 处理数据（过滤，整理格式等） > 3. 操作 DOM 呈现页面 > > 也就是说 React 也可以定义为一个将数据渲染为 HTML 视图的开源 JavaScript 库。 # 3 React 的三大特性 1. **声明式编程**： > 命令式编程 VS 声明式编程：
> > 简单来说，命令式编程就是通过代码来告诉计算机去做什么。
> > 而声明式编程是通过代码来告诉计算机你想要做什么，让计算机想出如何去做。
> > 举个生活中的例子就是： > **命令式编程**：我想喝一个冰可乐，然后我就会对身边的 XXX 说：“XXX，你去厨房，打开冰箱，拿出一瓶冰可乐，打开之后送过来给我。” > **声明式编程**：我想喝一个冰可乐，然后我就会对身边的 XXX 说：“XXX，我想喝冰可乐。”而具体他是怎么拿到的冰可乐，怎么送过来的，是下楼买的还是在冰箱里拿的，我并不关心，我只关心我喝冰可乐的需求是否得到了满足。
> 用代码来举个例子： > 如果我要在界面上展示一个按钮，并且点击按钮后会改变该按钮的 class。
> 用 DOM 编程写的代码就是命令式编程：首先你要指挥浏览器，第一步先要找到 id 为 container 的节点，然后创建一个 button element，接着给这个 button 添加一个 class name，然后添加一个点击事件，最后将 button 添加到 container 节点里。这整个过程每一步操作都是命令式的，一步一步告诉浏览器要做什么。 ```javascript const container = document.getElementById('container') const btn = document.createElement('button') btn.className = 'btn red ' btn.textContent = 'Demo' btn.onclick = function() { if (this.classList.contains('red')) { this.classList.remove('red') this.classList.add('blue') } else { this.classList.remove('blue') this.classList.add('red') } } container.appendChild(btn) ``` > 而要实现相同功能，采用声明式编程的 React 就简单得多了。 > 首先我们定义一个 Button 组件，在 render 函数里通过返回一个类似 HTML 的数据结构，告诉 React 我要渲染一个 Button，它是 id 为 container 的子节点。Button 上的 className 是动态变化的，当点击按钮时 class 要改变，这样就可以了。至于 render 什么时候被执行，是如何渲染到页面上的，点击按钮之后 className 是如何更新的，这些都不需要你关心，你只需要告诉 React 你希望当前的 UI 应该是一个什么样的状态就可以了。 ```javascript class Button extends React.Component { state = { color: 'red' } handleChange = () => { const color = this.state.color == 'red' ? 'blue' : 'red' this.setState({ color }) } render() { return (

) } } ``` 2. **组件化**：React 提供了一种全新的语法扩展，JSX。JSX 创造性地将渲染逻辑和 UI 逻辑结合在了一起，而这个结合体在 React 中就被称为组件。一个页面由多个组件组成，甚至整个应用都可以视为一个组件，只不过是最大的组件。组件可以层层嵌套，一个组件可以由多个组件组成，一个大的组件由很多个小组件组成，这些小组件也有可能由更小的组件组成。同一个组件可能会被使用在不同的地方。
组件化的出现大幅度地提升了代码地复用率，同时也改变了前端开发人员的一个编程思维 3. **一次学会，随处编写**：这句话的意思不是学会了想写什么就可以写什么，也不是说写一次想在哪里跑就在哪里跑，而是说学会后可以在很多地方使用 React 的语法来写代码，比如配合 React DOM 来编写 web 端的页面，配合 React Native 来写手机客户端 APP，配合 React 360 开发 VR 界面等。
React 的灵活性是由于它自身的定位决定的。React 是一个用于构建用户界面的 JS 库，对于 React 来说，这里的用户界面是一个抽象的虚拟的用户界面，其实就是一个描述页面状态的数据结构。web 页面，移动客户端页面，VR 界面都是用户界面，只要配合相应的渲染器就能在不同的平台中展示正确的 UI 界面。
通俗来说，我们可以把 React 的执行结果想象成一个视频文件数据，在不同的播放器设备，我们通过转换器将视频编译成不同的格式来让他们在不同的播放器上正常地播放。所以在写 web 端 React 时我们要额外引入 React DOM 来做渲染。 > 此外，React 使用虚拟 DOM+优秀的 Diffing 算法，尽量减少与真实 DOM 的交互，最小化页面重绘 # 4 React 入门 ## 4.1 hello_react ![image-20210424154725197](https://blog-1306207361.cos.ap-guangzhou.myqcloud.com/blog/image-01-2.png) ## 4.2 虚拟 DOM 的创建 1. 创建虚拟 DOM 的两种方式 - 纯 JS 方式（一般不用,过于繁琐） - JSX 方式（简单方便，最终由 babel 翻译成 js 的形式，与用 js 写的结果一样） 2. 虚拟 DOM 和真实 DOM - React 提供一些 API 来创建一种“特别”的`一般 js 对象` > ```javascript > const VDOM = React.createElement('xx', { id: 'xx' }, 'xx') ///依次为标签名，标签属性和标签内容 > ``` 上面创建的就是一个简单的虚拟 DOM 对象 ![image-20210424164734063](https://blog-1306207361.cos.ap-guangzhou.myqcloud.com/blog/image-20210424164734063.png) ![image-20210424164842135](https://i.loli.net/2021/04/25/qwd6egtIJMapLmA.png) - 我们编码时基本只需要操作 react 的虚拟 DOM 相关数据，react 就会转换为真实的 DOM > 关于虚拟 DOM 总结： > > 1. 本质是 Object 类型的对象（一般对象） > 2. 虚拟 DOM 比较“轻”，真实 DOM 比较“重”，因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性 > 3. 虚拟 DOM 对象最终都会被 React 转换为真实 DOM，呈现在页面上 ## 4.3 JSX > 链接：[JSX 基本语法规则](https://www.runoob.com/react/react-jsx.html) 1. 全称: JavaScript XML 2. react 定义的一种类似于 XML 的 JS 扩展语法: JS + XML，本质上还是 JavaScript 3. 是 React.createElement(component, props, ...children)方法的语法糖 4. 作用：用来简化创建虚拟 DOM - 写法：`var ele =

Hello JSX!

` - 它不是字符串（不要加引号），也不是 HTML/XML 标签 - 它最终产生的就是一个 js 对象 5. 标签名任意：HTML 标签或其他标签 6. 标签属性随意：HTML 标签属性或其它 7. 基本语法规则 - 标签首字母（1）若小写字母开头，则将该标签转为 HTML 中同名元素，若 HTML 中无该标签对应的同名元素，则报错。（2）若大写字母开头，则 react 就去渲染对应的组件，若组件没有定义，则报错 - 标签中的`js表达式`必须用{ }包含一定要区分：【JS 语句（代码）】与【js 表达式】表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式： - a - a+b - demo(1) //函数调用表达式 - arr.map() - function test() { } 语句（代码）：不产生值下面这些都是语句（代码）： - if(){} - for(){} - switch(){case:xxx} 注释需要写在花括号{}中样式的类名指定不要写 class，要写 className ```js myData ``` 样式双括号，小驼峰命名法虚拟 DOM 只能有一个根标签，有多个标签时，可用一个 div 包起来 - 标签必须闭合 8. `babel` 的作用 - 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行 - 只要用了 JSX，都要加上 `type="text/babel"`, 声明需要 babel 来处理 ## 4.4 模块与组件，模块化与组件化的理解 > 1. 模块 > > - 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件 > - 为什么要拆成模块：因为随着业务逻辑增加，代码越来越多且复杂 > - 作用：服用 js，简化 js 的编写，提高 js 运行效率 > 2. 组件 > > - 理解：用来实现局部功能的代码和资源的集合（html/css/js/image 等等） > - 为什么一个界面的功能很复杂，不可能写成一整块，要分成一块块写，然后拼起来 > - 作用：复用编码，简化项目编码，提高运行效率 > 3. 模块化 > > 当一个应用的 js 都是以模块来编写，这个应用就是一个模块化的应用 > > 4. 组件化 > > 当应用是以多组件的方式实现，这个应用就是一个组件化的应用 > > ![image-20210425114123063](https://blog-1306207361.cos.ap-guangzhou.myqcloud.com/blog/image-20210425114123063.png) # 5 React 面向组件编程 ## 5.1 基本理解和使用组件的类型 1. 函数式组件：用函数定义的组件，适用于简单组件的定义（没有实例，this=undefined） ![image-20210425170027082](https://blog-1306207361.cos.ap-guangzhou.myqcloud.com/blog/image-20210425170027082.png) 注意： (1)组件名必须首字母大写 (2)虚拟 DOM 元素只能有一个根元素 (3)虚拟 DOM 元素必须有结束标签 2. 类式组件：用类定义的组件，适用于复杂组件的定义（有实例） > 简单组件：无状态的组件 > > 复杂组件：有状态(state)的组件 > > 状态：举例子说 > > - 人是有状态的，比如今天的精神如何，人的状态会影响人的行为 > - 组件也是有状态的，组件的状态驱动页面，数据放在状态里 ## 5.2 组件实例的三大核心属性 ### 5.2.1 state 1. 理解： - state 是组件对象最重要的属性, 值是`对象`(可以包含多个 key-value 的组合),用{}包裹 - 组件被称为"状态机", 通过更新组件的 state 来更新对应的页面显示(重新渲染组件) 2. 注意： - 组件中 render 方法中的 this 为组件实例对象 - 组件自定义的方法中 this 为 undefined(作为事件的回调使用)，如何解决？ - a 强制绑定 this: 通过函数对象的 bind() - b 箭头函数【要写成赋值语句+箭头函数的形式，类里面不支持 function(){ }这种形式】 - 状态数据，不能直接修改或更新，要用 setState ### 5.2.2 props 1. 理解： - 每个组件对象都会有 props(properties 的简写)属性 - 组件标签的所有属性都保存在 props 中 2. 作用 - 通过标签属性从组件外向组件内传递变化的数据 - 注意: 组件内部不要修改 props 数据 3. 编码操作 - 内部读取某个属性值： this.props.name - 对 props 中的属性值进行类型限制和必要性限制 - 第一种方式（React v15.5 开始已弃用）： ```javascript Person.propTypes = { name: React.PropTypes.string.isRequired, age: React.PropTypes.number, } ``` - 第二种方式（新）：使用 prop-types 库进限制（需要引入 prop-types 库） ```javascript Person.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number. } ``` - 扩展属性：将对象的所有属性通过 props 传递：<**Person** {...person}/> - 默认属性值： ```javascript Person.defaultProps = { age: 18, sex: '男', } ``` - 组件类的构造函数 ```javascript constructor(props){ super(props) console.log(props)//打印所有属性 } ``` ### 5.2.3 ref 1. 理解：组件内的标签可以定义 ref 属性来标识自己 2. 编码 - 字符串形式的 ref：（已经不被 react 推荐使用）[官方说明](https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) ```js ``` - 回调形式的 ref ```js {this.input1 = c}} ``` - createRef 创建 ref 容器 ```js myRef = React.createRef() ; ``` ## 5.3 React 中的事件处理 1. 通过 onXxx 属性指定处理函数（注意大小写，与原生的 js 区分开） a) React 使用的是自定义(合成)事件, 而不是使用的原生 DOM 事件 ——目的是为了更好的兼容性 b) React 中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ——目的是为了高效 2. 通过 event.target 得到发生事件的 DOM 元素对象 ——为了避免过度使用 ref 不要过度使用 ref，当发生事件的 DOM 正好是要操作的 DOM 元素时可以用 event.target 的形式 ## 5.4 React 中收集表单数据 ### 5.4.1 非受控组件与非受控组件非受控组件：现用现取（ref）受控组件：随着输入维护状态为受控组件（onChange ， setState） ## 5.5 组件的生命周期 ### 5.5.1 效果需求：定义组件实现以下功能： 1. 让指定的文本做显示 / 隐藏的渐变动画 2. 从完全可见，到彻底消失，耗时 2S 3. 点击“不活了”按钮从界面中卸载组件 ![]() ### 5.5.2. 挂载与卸载挂载：mount。当组件第一次被渲染到 DOM 中的时候，就为其[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为“挂载（mount）”。卸载：unmount。同时，当 DOM 中组件被删除的时候，应该[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为“卸载（unmount）” ### 5.5.3 理解 1. 组件从创建到死亡它会经历一些特定的阶段。 2. React 组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。 3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。 ### 5.5.4 生命周期流程图（旧） ![]() 生命周期的三个阶段（旧） 1. 初始化阶段: 由 ReactDOM.render()触发---初次渲染 1). constructor() 2). componentWillMount() 3). render() 4). componentDidMount() = = = =>常用，一般在这个钩子中做一些初始化的事，例如开启定时器、发送网络请求、订阅消息、开启监听, 发送 ajax 请求等 2. 更新阶段: 由组件内部 this.setSate()或父组件重新 render 触发 1). shouldComponentUpdate() 2). componentWillUpdate() 3). render() = = = =>必须要使用 4). componentDidUpdate() 3. 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发 1). componentWillUnmount() = = = =>常用，一般在这个钩子做一些收尾的工作，例如，关闭定时器、取消订阅消息 ### 5.5.5 生命周期流程图（新） ![]() 生命周期的三个阶段（新） 1. **初始化阶段:** 由 ReactDOM.render()触发---初次渲染 constructor() `getDerivedStateFromProps`新增，很少用，上官网了解即可) （此方法适用于[罕见的用例](https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state)，即 state 的值在任何时候都取决于 props） render() componentDidMount() 2. **更新阶段:** 由组件内部 this.setSate()或父组件重新 render 触发 getDerivedStateFromProps shouldComponentUpdate() render() `getSnapshotBeforeUpdate` 在更新之前获取快照，有点实用意义 componentDidUpdate() 3. **卸载组件:** 由 ReactDOM.unmountComponentAtNode()触发 componentWillUnmount() ### 5.5.6 重要勾子和即将废弃的勾子 1. 重要勾子 - render：必须要使用，初始化渲染或更新渲染调用 - componentDidMount：一般在这个钩子中做一些初始化的事，例如开启定时器、发送网络请求、订阅消息，开启监听, 发送 ajax 请求等 - componentWillUnmount：做一些收尾工作, 如: 清理定时器，取消订阅等 2. 即将废弃的勾子 - componentWillMount - componentWillReceiveProps - componentWillUpdate 16 版本能正常使用，17 版本使用会出现警告，下一个大版本需要加上 UNSAFE\_前缀才能使用，以后可能会被彻底废弃，不建议使用。 ## 5.6 虚拟 DOM 与 DOM Diffing 算法 1. 基本原理图 ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/react-study/1.2kvd04vixaq0.png) 2. 经典面试题: 1). react/vue 中的 key 有什么作用？（key 的内部原理是什么？） 2). 为什么遍历列表时，key 最好不要用 index? > 1. 虚拟 DOM 中 key 的作用： > > 1). 简单地说: key 是虚拟 DOM 对象的标识, 在更新显示时 key 起着极其重要的作用。 > > 2). 详细地·说: 当状态中的数据发生变化时，react 会根据【新数据】生成【新的虚拟 DOM】, 随后 React 进行【新虚拟 DOM】与【旧虚拟 DOM】的 diff 比较，比较规则如下： > > a. 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key： > > (1).若虚拟 DOM 中内容没变, 直接使用之前的真实 DOM > > (2).若虚拟 DOM 中内容变了, 则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM > > b. 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key > > 根据数据创建新的真实 DOM，随后渲染到到页面 > 2. 用 index 作为 key 可能会引发的问题： > > 1) 若对数据进行：逆序添加、逆序删除等破坏顺序操作: > > 会产生没有必要的真实 DOM 更新 ==> 界面效果没问题, 但效率低。 > > 2.)如果结构中还包含输入类的 DOM：会产生错误 DOM 更新 ==> 界面有问题。 > > 3) `注意`如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。 > 3. 开发中如何选择 key?: > > 1) 最好使用每条数据的唯一标识作为 key, 比如 id、手机号、身份证号、学号等唯一值。 > > 2) 如果确定只是简单的展示数据，用 index 也是可以的。 # 6 React 应用(基于 React 脚手架) ## 6.1 使用 create-react-app 创建 react 应用 ### 6.1.1 react 脚手架 1. xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目 1）包含了所有需要的配置（语法检查、jsx 编译、devServer…） 2）下载好了所有相关的依赖、 3）可以直接运行一个简单效果 2. react 提供了一个用于创建 react 项目的脚手架库: create-react-app 3. 项目的整体技术架构为: react + webpack + es6 + eslint 4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化 ### 6.1.2 创建项目并启动 **第一步**，全局安装：npm i -g create-react-app **第二步**，切换到想创项目的目录，使用命令：create-react-app hello-react **第三步**，进入项目文件夹：cd hello-react **第四步**，启动项目：npm start ### 6.1.3 react 脚手架项目结构 > public ---- 静态资源文件夹 > > favicon.icon ------ 网站页签图标(一定要是 icon 格式) > > index.html --------主页面（整个项目只有这一个 html 文件，SPA 应用，即单页面应用） > > logo192.png ------- logo 图 > > logo512.png ------- logo 图 > > manifest.json ----- 应用加壳的配置文件 > > robots.txt -------- 爬虫协议文件 > > src ---- 源码文件夹 > > App.css -------- App 组件的样式 > > App.js --------- App 组件 > > App.test.js ---- 用于给 App 做测试（几乎不用） > > index.css ------ 样式 > > index.js ----— 入口文件 > > logo.svg ------- logo 图 > > reportWebVitals.js > > --- 页面性能分析文件(需要 web-vitals 库的支持) > > setupTests.js > > ---- 组件单元测试的文件(需要 jest-dom 库的支持) ### 6.1.4 功能界面的组件化编码流程（通用） 1. 拆分组件: 拆分界面,抽取组件 2. 实现静态组件: 使用组件实现静态页面效果 3. 实现动态组件 3.1 动态显示初始化数据 3.1.1 数据类型 3.1.2 数据名称 3.1.3 保存在哪个组件? 3.2 交互(从绑定事件监听开始) ## 6.2 react ajax ### 6.2.1 理解 1. 注意 - React 本身只关注于界面, 并不包含发送 ajax 请求的代码 - 前端应用需要通过 ajax 请求与后台进行交互(json 数据) - react 应用中需要集成第三方 ajax 库(或自己封装) 2. 常用的 ajax 请求库 - Query: 比较重, 如果需要另外引入不建议使用 - axios: 轻量级, 建议使用 1) 封装 XmlHttpRequest 对象的 ajax 2) promise 风格 3) 可以用在浏览器端和 node 服务器端 ### 6.2.2 axios 1. [文档](https://github.com/axios/axios) 2. 相关 API - GET 请求 ```javascript axios .get('/user?ID=12345') .then(function(response) { console.log(response.data) }) .catch(function(error) { console.log(error) }) axios .get('/user', { params: { ID: 12345, }, }) .then(function(response) { console.log(response) }) .catch(function(error) { console.log(error) }) ``` - POST 请求 ```js axios .post('/user', { firstName: 'Fred', lastName: 'Flintstone', }) .then(function(response) { console.log(response) }) .catch(function(error) { console.log(error) }) ``` ### 6.2.3 react 脚手架配置代理总结 1. 方法 1 在 package.json 中追加如下配置 ```json "proxy":"http://localhost:5000" ``` 说明： 1）优点：配置简单，前端请求资源时可以不加任何前缀。 2）缺点：不能配置多个代理。 3）工作方式：上述方式配置代理，当请求了 3000 不存在的资源时，那么该请求会转发给 5000 （优先匹配前端资源） 2. 方法 2： 1)第一步：创建代理配置文件在 src 下创建配置文件：src/setupProxy.js 2) 编写 setupProxy.js 配置具体代理规则： ```js const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址) changeOrigin: true, //控制服务器接收到的请求头中host字段的值 /* changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000 changeOrigin默认值为false，但我们一般将changeOrigin值设为true */ pathRewrite: { '^/api1': '' }, //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置) }), proxy('/api2', { target: 'http://localhost:5001', changeOrigin: true, pathRewrite: { '^/api2': '' }, }) ) } ``` 说明： 1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。 2. 缺点：配置繁琐，前端请求资源时必须加前缀。 ### 6.2.4 消息订阅-发布机制 1. 工具库: PubSubJS 2. 下载: npm install pubsub-js --save 3. 使用: 1) import PubSub from 'pubsub-js' //引入 2) PubSub.subscribe('delete', function(data){ }); //订阅 3) PubSub.publish('delete', data) //发布消息 4. 理解 1）先订阅，再发布（理解：有一种隔空对话的感觉） 2）适用于任意组件间通信 3）要在组件的 componentWillUnmount 中取消订阅 ### 6.2.5 扩展：Fetch(关注分离思想) 1. 文档 1） 2） 2. 特点 1）fetch: 原生函数，不再使用 XmlHttpRequest 对象提交 ajax 请求（axios 和 jQuery 都是对 XmlHttpRequset 的封装） 2）老版本浏览器可能不支持 3. 相关 API 1）GET 请求 ```js fetch(url) .then(function(response) { return response.json() }) .then(function(data) { console.log(data) }) .catch(function(e) { console.log(e) }) ``` 2）POST 请求 ```js fetch(url, { method: 'POST', body: JSON.stringify(data), }) .then(function(data) { console.log(data) }) .catch(function(e) { console.log(e) }) ``` # 7 React 路由 ## 7.1 相关理解 ### 7.1.1 SPA 的理解 1. 单页 Web 应用（single page web application，SPA）。 2. 整个应用只有`一个完整的页面`。 3. 点击页面中的链接`不会刷新`页面，只会做页面的`局部更新。` 4. 数据都需要通过 ajax 请求获取, 并在前端异步展现。 ### 7.1.2 路由的理解 **1.** **什么是路由?** - 一个路由就是一个映射关系(key:value) - key 为路径, value 可能是 function 或 component **2.** **路由分类** 1）后端路由： - 理解： value 是 function, 用来处理客户端提交的请求。 - 注册路由： router.get(path, function(req, res)) - 工作过程：当 node 接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据 2）前端路由： - 浏览器端路由，value 是 component，用于展示页面内容。 - 注册路由: `` - 工作过程：当浏览器的 path 变为/test 时, 当前路由组件就会变为 Test 组件 ### 7.1 .3 react-router-dom 的理解 1. react 的一个插件库。 2. 专门用来实现一个 SPA 应用。 3. 基于 react 的项目基本都会用到此库。 ## 7.2 react-router-dom 相关 API ### 7.2.1 内置组件 1. `` 2. `` 3. `` 4. `` 5. `` 6. `` 7. `` ### 7.2.2. 其它 1. history 对象 2. match 对象 3. withRouter 函数

React全家桶