什么是hooks?
- Hook是React 16.8.0 版本新增的新特性/新语法。
- 可以让你在函数组件中使用 state 以及其他的 React 特性。
为什么用hooks？
- 高阶组件为了复用，导致代码层级复杂。
- 生命周期的复杂。
- 写成functional组件，无状态组件，因为需要状态，又改成了class，成本高。
常用的hooks
useState(保存组件状态)
const [age,setage] = useState(initalState)
age就是存储的状态，通过setage(value)能修改 age的值为 value 。
useEffect(处理副作用)和useLayoutEffect(同步执行副作用)
Function Component 不存在生命周期，所以不要把Class Component 的生命周期概念搬过来试图对号入座。
useEffect(() => { //effect return ()=> { //cleanup }; },[依赖的状态；空数组，表示不依赖])
第二个参数如果为空数组，就说明它不依赖于其他任何数据，从组件创建到销毁的过程中只会执行一次。
如果不是空数组，除去第一次执行外，数组中的变量值改变，也会再次执行这个函数。
不要对Dependencies 撒谎， 如果你明明使用了某个变量，却没有申明在依赖中，你等于向React撒了谎，后果就是，当依赖的变量改变时，useEffect也不会再次执行，eslint 会报警告。
返回值
当useEffect的返回值为回调函数时，如果第二个参数为空数组，这个调用函数会在组件被销毁的时候执行，这个时候适合清空定时器，取消订阅，取消绑定事件等。
如果第二个参数不是空数组，那么这个回调函数会在销毁和依赖的数据更新时执行。
useEffect和useLayoutEffect有什么区别？
简单来说就是调用的时机不同，useLayoutEffect和原来componentDidMount &componentDidUpdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而useEffect是会在整个页面渲染完才会调用的代码。
官方建议优先使用 useEffect。
在实际使用时如果想要避免页面抖动（在 useEffect 里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放到 useLayoutEffect里。在这里做点dom操作，这些dom修改会和 react 做出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价。
useCallback(记忆函数)
防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次
var handleClick = useCallback(()=>{ console.log(name) },[name]) <button></button>
只有name改变后，这个函数才会重新声明一次。
如果第二个参数传入空数组，那么name第一次创建后就被缓存，当再次执行 handleClick时，即使name后期改变了，拿到的还是老的name。
如果不传第二个参数，每次都会重新渲染一次，拿到的是最新的name。
useMemo(记忆组件)
useCallback的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。
useCallback(fn,inputs) is equivalent to useMemo(()=>fn,inputs).
唯一的区别是：**useCallback不会执行第一个参数函数，而是将它返回给你，而 useMemo会执行第一个函数并且将函数执行结果返回给你。**所以在前面的例子中，可以返回 handleClick 来达到存储函数的目的。
所以 useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo更适合经过函数计算得到一个确定的值，比如记忆组件。
useRef(保存引用值)
const myswiper = useRef(null); <Swiper ref={myswiper}/>
useRef 可以保存住先前的值，保存临时变量不丢失，绑在DOM上实现组件通信或组件访问。
useContext（减少组件层级）
先了解一下context。
创建 context 对象
const GlobalContext = React.createContext()
父组件中
<GlobalContext.Provider value={{ call:"打电话"， sms:"发短信"， info:"xxxxxxx" }}> </GlobalContext.Provider>
子组件中
<GlobalContext.Consumer> { (value)=>{ {call}-{sms}-{info} } } </GlobalContext.Consumer>
使用context的形式，子组件能通过 value这个参数获取到父组件传来的属性。
而 useContext()可以在子组件内通过 const value = useContext(GlobalContext)直接获取父组件传来的属性。不需要再写 GlobalContext.Consumer这种标签。
useReduce
实现了React视图逻辑于数据逻辑的分离开来。
也就是说组件的状态与函数方法写到组件实例的外部。
组件内：
const [state,dispatch] = useReducer(reducer,initialState)
state表示状态对象， dispatch传入参数对象，根据标识执行函数方法。
dispatch({ type:"a", value:"b"， ... })
组件外
const initialState = { count:0 }
表示创建了count对象，组件内可以通过 state.count获取。
const reducer = (prevState,action)=>{ let newState = {...prevState} switch(action.type){ case "a": ... return ... case "b": ... return ... default: return prevState } }
两个参数：
prevState：组件的现状态对象action：dispatch()传入的对象。
根据 action.type选择进行什么操作。
缺点：不支持异步操作。
注意：不能影响原状态。需要对原状态进行深复制。
