react hook的使用

hook让无状态组件有了状态。让函数变成了有状态函数。
常用hook有一下，useState /useEffet / useContext /useReducer
hooks的目标是不再写class,让function一统江湖

react核心思想是把一个页面拆分成一大堆可以复用的小组件，并且通过自上而下的数据流把整个组件联系起来。但是有状态组件因为状态的原因，让组件复用变的麻烦起来。官方以前解决这类型的方法是，渲染属性和高阶组件。

渲染属性是指，用一个值为函数的props来传递动态渲染的node或者组件。举例就是用一个组件包含所有的动态数据。另外分离出一个组件，只是展示页面。

高阶组件时接收一个组件组为参数的函数，经过加工，返回新的组件。
这两种都不错，但是会增加组件的层级嵌套关系。而hooks 则没有那么多层级嵌套，只需要把一个个功能写成一个个hooks即可。
生命周期函数里面的逻辑比较容易混乱。

class容易令人困惑。比如，经常的this指向问题。

state Hooks到底做了什么
一。声明状态变量
useState是react自带的hook函数，作用，声明状态变量。

二。读取状态值
状态count就是一个单纯的变量而已，不需要{this.state.count} 了
三。更新状态
用户点击按钮，调用了setcount函数。setCount接收的是修改过的最新的状态。接下来react会重新渲染组件ui

四。假如一个组件有多个状态值
类似于mixins。都是提供了即时插拔的能力。mixin机制是让多个mixin共享一个对象的数据空间，造成确保mixin依赖的状态会发生冲突。
每一个hook都是独立的，不同组件调用同一个Hook也能保证不同状态，这是两者本质区别。
五。既然这样，react如何保证 useState相互独立
react根据useState出现的顺序来确定useState找到不同的state。鉴于此，react要求我们必须把hooks写在函数的最外层，并且不能写在ifelse等条件语句中，确保hooks执行顺序一致

什么是Effect Hooks
增加一个新功能
写有状态组件通常会有很多副作用，比如发起ajax请求，添加监听事件，或者手动修改dom。useEffect相当于三合一生命在周期函数：componentDidMount,componentDidUpdate,componentWillMount.
由于hooks可以反复多次使用。我们这里可以给每一个副作用一个userEffect钩子，这样这些副作用就不需要堆在生命周期函数中，很清晰。
一。首先声明一个状态，然后告诉react，目前这个组件有一个副作用。给useEffect传入一个匿名函数，这个匿名函数就是副作用。这里的副作用是调用API来修改标题。react渲染组件的时候，会记住副作用，当更新了DOM后，它在执行我们的副作用。
注意：1.react首次渲染和之后每次渲染都会调用useEffect函数。之前我们需要用两个函数来处理，一个是DidMount,一个是DidUpdate。
2.useEffect中定义的副作用函数不会阻碍视图的更新，因为里面的函数是异步的。而之前的DidMount和DidUpdate是同步进行的。这种安排队大多数副作用函数是合理的。
useEffect如何解绑副作用函数。比如在DidMount里添加一个注册，就需要在DidUnmount里面销毁它。解决方式是让useEffect函数返回一个新的函数，这个函数将会在组件重新渲染后执行。副作用函数返回的清理函数也会每次组件渲染之后执行，而DIdunmount只会在组件销毁时，执行一次。
虽然这样useEffect每次渲染都执行，是有好处的，但显然也是不经济的。如何跳过不必要的计算，只需在useeffect中出传入第二个参数。只有这个参数值改变了，才重新渲染。

其他hook
useContext useReducer useCallback useMemo useRef
useImperativeMethods useMutationEffect useLayoutEffect

自定义Effect Hooks
好处是可以把复用逻辑抽离出来，变成随意插拔的组件

react会帮助函数记住状态的初始值。