React16.4开发简书项目 React高级内容

本章讲解React高级部分内容，包含PropTypes，生命周期函数，虚拟Dom，数据mock，动画实现等部分课程讲解。

一.

1.1 类型校验和默认值。

1.2 什么是虚拟DOM

生成真正的DOM需要调用很多底层的东西，很耗性能，而且真实DOM的对比也很耗性能，而虚拟DOM则是JavaScript模拟的DOM，所以对于生成和对比，性能会很大程度上提高。

非虚拟DOM情况：

非虚拟DOM的进化：

1.3 React真实的DOM变化过程

1.4 虚拟DOM的优点：

1. 性能提升了
2. 它使得跨端应用得以实现。 如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的情况：

扫描二维码关注公众号，回复： 10852984 查看本文章

上面两个渲染的性能是不一样的。

二.

2.1 ref 获取DOM
2.2 React中的生命周期函数
当一个组件被重新Render的时候，它的子组件里的Render函数也会重新执行，这是在这个组件的key不变的情况下；如果key值都变了，那么组件的整个生命周期函数都会被执行。

---

2.3 性能优化：

1. 虚拟DOM

2. setState() 是一个异步函数，将多次的setState合并成一次(反正是更少的次数)
   setState可以传递一个函数，这个函数里的参数是state的状态。
   参考官网
   

3. shouldComponentUpdate()来避免不必要的子组件渲染。
   

注意， 在render函数里的 const { content } = this.props;中的content只能在render函数里代表this.props.content，而在其他生命周期函数里不好使。

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来使用