本章讲解React高级部分内容，包含PropTypes，生命周期函数，虚拟Dom，数据mock，动画实现等部分课程讲解。
一.
1.1 类型校验和默认值。
1.2 什么是虚拟DOM
生成真正的DOM需要调用很多底层的东西，很耗性能，而且真实DOM的对比也很耗性能，而虚拟DOM则是JavaScript模拟的DOM，所以对于生成和对比，性能会很大程度上提高。
非虚拟DOM情况：
非虚拟DOM的进化：
1.3 React真实的DOM变化过程
1.4 虚拟DOM的优点：
- 性能提升了
- 它使得跨端应用得以实现。 如React Native ，因为生成的虚拟DOM在浏览器中被编译成真实DOM，而在原生应用中可能会被编译成其他的组件，所以可以实现跨端应用。
1.5 diff算法
两个虚拟DOM是怎么进行比对的呢？
1.5.1 setState这个方法为什么是异步的呢？为了提升React的性能，比如你在很短的一段时间内多次setState，而内容又没有啥变化，那么React就会把这多次的setState合并成一个，这也是setState异步的初衷。
1.5.2 diff算法是逐 层比较的。如果第一层就不一样，那么下面的就不会再做比较了，直接替换掉新的。
1.5.3 K值的概念：k值一定要稳定，因为在diff算法的时候要进行比较的
在React循环渲染的时候，维护k值稳定性的重要性：React是通过diff算法进行两个虚拟DOM的对比，而对比的时候最好有一个标签，这样就知道谁和谁在对比，也就是key值，而如果key值用循环里的index的话，比如删除a这一项：
用index的情况：
用item的情况：
上面两个渲染的性能是不一样的。
二.
2.1 ref 获取DOM
2.2 React中的生命周期函数
2.3 性能优化：
1. 虚拟DOM
2. setState() 是一个异步函数，将多次的setState合并成一次(反正是更少的次数)
3. shouldComponentUpdate()来避免不必要的子组件渲染。
2.4 发送ajax请求
axios 需要单独安装
import axios from 'axios'
axios.get().then()
三 4-10
3.1 使用Charles进行接口数据的模拟
3.2 React 的CSS过渡动画 react-transition-group
react-transition-group除了给我们提供了一些普通的CSS动画效果之外，还给我们提供了许多生命周期钩子函数，比如在动画开始之前做一些事情，或者动画之后做一些事情。
里面有四个组件：
- Transition
- CSSTransition
- SwitchTransition
- TransitionGroup
TransitionGroup 需要结合CSSTransition来使用
来源：CSDN
作者：Benjaminpcm
链接：https://blog.csdn.net/yexudengzhidao/article/details/103723922