1.ES6 类的知识
ES6类的继承
2.创建类组件
创建类组件
创建一个构造函数(类)
+ 要求必须继承React.Component/PureComponent这个类
+ 我们习惯于使用ES6中的class创建类「因为方便」
+ 必须给当前类设置一个render的方法「放在其原型上」：在render方法中，返回需要渲染的视图
从调用类组件「new Vote({...})」开始，类组件内部发生的事情：
1. 初始化属性 && 规则校验
先规则校验，校验完毕后，再处理属性的其他操作！！
方案一：
constructor(props) {
super(props); //会把传递进来的属性挂载到this实例上
console.log(this.props); //获取到传递的属性
}
方案二：即便我们自己不再constructor中处理「或者constructor都没写」，在constructor处理完毕后，React内部也会把传递的props挂载到实例上；所以在其他的函数中，只要保证this是实例，就可以基于this.props获取传递的属性！
+ 同样this.props获取的属性对象也是被冻结的{只读的} Object.isFrozen(this.props)->true属性规则校验
2. 初始化状态
状态：后期修改状态，可以触发视图的更新
需要手动初始化，如果我们没有去做相关的处理，则默认会往实例上挂载一个state，初始值是null => this.state=null
手动处理：
state = {
...
};
---------修改状态，控制视图更新
this.state.xxx=xxx ：这种操作仅仅是修改了状态值，但是无法让视图更新
想让视图更新，我们需要基于React.Component.prototype提供的方法操作：
@1 this.setState(partialState) 既可以修改状态，也可以让视图更新 「推荐」
+ partialState:部分状态
this.setState({
xxx:xxx
});
@2 this.forceUpdate() 强制更新 -- 不推荐setState
强制更新
react严格模式
3. 触发 componentWillMount 周期函数(钩子函数)：组件第一次渲染之前
钩子函数：在程序运行到某个阶段，我们可以基于提供一个处理函数，让开发者在这个阶段做一些自定义的事情
+ 此周期函数，目前是不安全的「虽然可以用，但是未来可能要被移除了，所以不建议使用」
+ 控制会抛出黄色警告「为了不抛出警告，我们可以暂时用 UNSAFE_componentWillMount」
+ 如果开启了React.StrictMode「React的严格模式」，则我们使用 UNSAFE_componentWillMount 这样的周期函数，控制台会直接抛出红色警告错误！！
React.StrictMode VS "use strict"
+ "use strict"：JS的严格模式
+ React.StrictMode：React的严格模式，它会去检查React中一些不规范的语法、或者是一些不建议使用的API等！！
3.渲染逻辑
类组件第一次渲染的逻辑
创建一个构造函数(类)
+ 要求必须继承React.Component/PureComponent这个类
+ 我们习惯于使用ES6中的class创建类「因为方便」
+ 必须给当前类设置一个render的方法「放在其原型上」：在render方法中，返回需要渲染的视图
从调用类组件「new Vote({...})」开始，类组件内部发生的事情：
1. 初始化属性 && 规则校验
先规则校验，校验完毕后，再处理属性的其他操作！！
方案一：
constructor(props) {
super(props); //会把传递进来的属性挂载到this实例上
console.log(this.props); //获取到传递的属性
}
方案二：即便我们自己不再constructor中处理「或者constructor都没写」，在constructor处理完毕后，React内部也会把传递的props挂载到实例上；所以在其他的函数中，只要保证this是实例，就可以基于this.props获取传递的属性！
+ 同样this.props获取的属性对象也是被冻结的{只读的} Object.isFrozen(this.props)->true
2. 初始化状态
状态：后期修改状态，可以触发视图的更新
需要手动初始化，如果我们没有去做相关的处理，则默认会往实例上挂载一个state，初始值是null => this.state=null
手动处理：
state = {
...
};
---------修改状态，控制视图更新
this.state.xxx=xxx ：这种操作仅仅是修改了状态值，但是无法让视图更新
想让视图更新，我们需要基于React.Component.prototype提供的方法操作：
@1 this.setState(partialState) 既可以修改状态，也可以让视图更新 「推荐」
+ partialState:部分状态
this.setState({
xxx:xxx
});
@2 this.forceUpdate() 强制更新 -- 不推荐
3. 触发 componentWillMount 周期函数(钩子函数)：组件第一次渲染之前
钩子函数：在程序运行到某个阶段，我们可以基于提供一个处理函数，让开发者在这个阶段做一些自定义的事情
+ 此周期函数，目前是不安全的「虽然可以用，但是未来可能要被移除了，所以不建议使用」
+ 控制会抛出黄色警告「为了不抛出警告，我们可以暂时用 UNSAFE_componentWillMount」
+ 如果开启了React.StrictMode「React的严格模式」，则我们使用 UNSAFE_componentWillMount 这样的周期函数，控制台会直接抛出红色警告错误！！
React.StrictMode VS "use strict"
+ "use strict"：JS的严格模式
+ React.StrictMode：React的严格模式，它会去检查React中一些不规范的语法、或者是一些不建议使用的API等！！
4. 触发 render 周期函数：渲染
5. 触发 componentDidMount 周期函数：第一次渲染完毕
+ 已经把virtualDOM变为真实DOM了「所以我们可以获取真实DOM了」
+ ...组件更新的逻辑
组件更新的逻辑「第一种：组件内部的状态被修改，组件会更新」
1. 触发 shouldComponentUpdate 周期函数：是否允许更新
shouldComponentUpdate(nextProps, nextState) {
// nextState:存储要修改的最新状态
// this.state:存储的还是修改前的状态「此时状态还没有改变」
console.log(this.state, nextState);
// 此周期函数需要返回true/false
// 返回true：允许更新，会继续执行下一个操作
// 返回false：不允许更新，接下来啥都不处理
return true;
}
2. 触发 componentWillUpdate 周期函数：更新之前
+ 此周期函数也是不安全的
+ 在这个阶段，状态/属性还没有被修改
3. 修改状态值/属性值「让this.state.xxx改为最新的值」
4. 触发 render 周期函数：组件更新
+ 按照最新的状态/属性，把返回的JSX编译为virtualDOM
+ 和上一次渲染出来的virtualDOM进行对比「DOM-DIFF」
+ 把差异的部分进行渲染「渲染为真实的DOM」
5. 触发 componentDidUpdate 周期函数：组件更新完毕
特殊说明：如果我们是基于 this.forceUpdate() 强制更新视图，会跳过 shouldComponentUpdate 周期函数的校验，直接从 WillUpdate 开始进行更新「也就是：视图一定会触发更新」！
组件更新的逻辑「第二种：父组件更新，触发的子组件更新」
1. 触发 componentWillReceiveProps 周期函数：接收最新属性之前
+ 周期函数是不安全的
UNSAFE_componentWillReceiveProps(nextProps) {
// this.props:存储之前的属性
// nextProps:传递进来的最新属性值
console.log('componentWillReceiveProps:', this.props, nextProps);
}
2. 触发 shouldComponentUpdate 周期函数
......
组件卸载的逻辑
1. 触发 componentWillUnmount 周期函数：组件销毁之前
2. 销毁
父子组件嵌套，处理机制上遵循深度优先原则：父组件在操作中，遇到子组件，一定是把子组件处理完，父组件才能继续处理
+ 父组件第一次渲染
父 willMount -> 父 render「子 willMount -> 子 render -> 子didMount」 -> 父didMount
+ 父组件更新：
父 shouldUpdate -> 父willUpdate -> 父 render 「子willReceiveProps -> 子 shouldUpdate -> 子willUpdate -> 子 render -> 子 didUpdate」-> 父 didUpdate
+ 父组件销毁：
父 willUnmount -> 处理中「子willUnmount -> 子销毁」-> 父销毁4.函数组件与类组件
函数组件是“静态组件”：
+ 组件第一次渲染完毕后，无法基于“内部的某些操作”让组件更新「无法实现“自更新”」；但是，如果调用它的父组件更新了，那么相关的子组件也一定会更新「可能传递最新的属性值进来」；
+ 函数组件具备：属性...「其他状态等内容几乎没有」
+ 优势：比类组件处理的机制简单，这样导致函数组件渲染速度更快！！
类组件是“动态组件”：
+ 组件在第一渲染完毕后，除了父组件更新可以触发其更新外，我们还可以通过：this.setState修改状态 或者 this.forceUpdate 等方式，让组件实现“自更新”！！
+ 类组件具备：属性、状态、周期函数、ref...「几乎组件应该有的东西它都具备」
+ 优势：功能强大！！
===>Hooks组件「推荐」：具备了函数组件和类组件的各自优势，在函数组件的基础上，基于hooks函数，让函数组件也可以拥有状态、周期函数等，让函数组件也可以实现自更新「动态化」！！