React Hook

[XingGuoZM]

为什么会有hook

逻辑复用解决方案
1. render prop
2. mixins: mixins之所以被否定，是因为Mixins机制是让多个Mixins共享一个对象的数据空间，这样就很难确保不同Mixins依赖的状态不发生冲突
3. hoc
复用有状态的组件变得麻烦
代码层级加深 
4. hook: 是直接用在function当中，而不是class；另一方面每一个hook都是相互独立的，不同组件调用同一个hook也能保证各自状态的独立性

class component vs function component

在class状态中，通过一个实例化的class，去维护组件中的各种状态；但是在function组件中，没有一个状态去保存这些信息，每一次函数上下文执行，所有变量，常量都重新声明，执行完毕，再被垃圾机制回收。因此function component每一次更新都是一次函数的重新执行，需要hook来记录状态和处理副作用等。
1. 逻辑混乱
我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在componentDidUpdate做一遍同样的事情
2.this指向
4.之前版本的react function component是无状态的，纯展示型组件首选function component，但是随着需求变动，之前写的function component必须有自己的状态了，于是又要将function component改为class component
5.this.setState做的是合并状态后返回一个新状态，而useState是直接替换老状态后返回新状态

判断在hooks执行是否在函数组件内部

useState

useState即状态钩子
1. 怎么保证多个useState的相互独立的？
2. 

useEffect

useEffect即副作用钩子，componentDidMount、componentDidUpdate和componentWillUnmount生命周期函数三合一
更新：每次更新之后都会重新执行一下副作用函数，通过加入依赖数组可以选择性的跳过副作用函数的执行
销毁：副作用函数返回一个新的函数是在下一次重新渲染之后，同时在副作用最前头执行
react更新了DOM之后，它再依次执行我们定义的副作用函数