摘要：此優(yōu)化有助于避免在每個(gè)渲染上進(jìn)行昂貴的計(jì)算。同樣也是一個(gè)函數(shù)，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為函數(shù)，第二個(gè)參數(shù)為要比對(duì)的值，返回一個(gè)值。同理，第二個(gè)參數(shù)傳入的值沒有更新時(shí)，不會(huì)執(zhí)行。以上代碼的地址為初體驗(yàn)

什么是Hooks？
Hooks是react即將推出的功能，它允許您在不編寫類的情況下使用狀態(tài)和其他React功能。
我的理解就是可以用寫無狀態(tài)組件的方式去編寫擁有狀態(tài)的組件。
遺憾的是，正式版16.7.0出了之后并沒有hooks，如果需要體驗(yàn)還需下載next版本，目前是16.7.0-alpha.2

npm i react@next
這次與大家分享四個(gè)Hooks，個(gè)人覺得這幾個(gè)應(yīng)該是之后工作中會(huì)經(jīng)常使用到的。

 1. useState
 2. useEffect
 3. useReducer
 4. useMemo

1.useState
個(gè)人感覺這個(gè)鉤子是重點(diǎn)，使用它即可做到用函數(shù)的編寫帶有狀態(tài)的組件。

import React,{ useState，useEffect } from "react"
const HookTest = () => {
    const [obj,setValue] = useState({key:"count",value:0});
    const handleChange = () => {
        const value = obj.value+1;
        //改變狀態(tài)
        setValue(Object.assign(obj,{value}));
    }
    return (
        

             {obj.key}:{obj.value}
             

                累加
             
        
    )
}

很明顯，重點(diǎn)在于const [obj,setValue] = useState({key:"count",value:0})這一句，useState是個(gè)函數(shù)，接收一個(gè)狀默認(rèn)值，返回一個(gè)數(shù)組，第一個(gè)元素為狀態(tài)，初始值為傳入函數(shù)的默認(rèn)值，第二個(gè)元素為方法，可使用此方法改變狀態(tài)的值。

2.useEffect
這個(gè)鉤子，官方所說是componentDidMount，componentDidUpdate和componentWillUnmount這三個(gè)生命周期的結(jié)合，因?yàn)榻M件掛載完成時(shí)會(huì)執(zhí)行，更新時(shí)會(huì)執(zhí)行，卸載時(shí)會(huì)執(zhí)行，接上面的HookTest組件，往里添加

useEffect(()=>{
    console.log("obj->",obj);
    return ()=>{
        console.log("卸載時(shí)..");
    }
});

這就是一個(gè)基本用法，掛載、更新、卸載都會(huì)打印obj對(duì)象，return的函數(shù)，作為組件更新或者卸載時(shí)執(zhí)行，比如在使用setinterval,可以在return的函數(shù)里寫clearinterval。
如果只想讓它執(zhí)行一次的話，可以往函數(shù)里添加第二個(gè)參數(shù)。

useEffect(()=>{
    console.log("obj->",obj);
},false);

這樣只在掛載完成時(shí)執(zhí)行一次，第二個(gè)參數(shù)可以為false、[]、{}、""
如果想讓他有條件的執(zhí)行，可以往第二個(gè)參數(shù)傳入具體的參數(shù)

useEffect(()=>{
    console.log("obj->",obj);
},{obj.value});

如果obj.value值變化時(shí)，就執(zhí)行，沒變化時(shí)就不執(zhí)行，對(duì)于性能優(yōu)化非常友好。

3.useReducer

如果使用過redux的童鞋們不會(huì)默認(rèn)，將需要的狀態(tài)保存到一個(gè)對(duì)象中，可供所有的組件使用。
先上代碼

import React, { useReducer,useMemo,useEffect,useState } from "react";
//創(chuàng)建reducer，reducer可在外部創(chuàng)建然后再引入
function reducer(state = { count: 0 }, action) {
    switch (action.type) {
        case "reset":
            return { count: 0 };
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count <= 0 ? 0 : state.count - 1 };
        default:
            return state;
    }
}
//組件
const useReducerDemo = () => {
    const [state, dispatch] = useReducer(reducer, { count: 0 }, { type: "increment" });
    //異步增加
    const asyncIncrement = () => {
        setTimeout(()=>{
            dispatch({ type: "increment" })
        },2000);
    }
    return (
        

            

                Count: {state.count}
                 dispatch({ type: "reset" })}>還原
                 dispatch({ type: "increment" })}>+
                 dispatch({ type: "decrement" })}>-
                async+
            
        
    )
}

可以看到，和useState很像，也是使用一個(gè)數(shù)組解構(gòu)接受返回的值。
先說返回的值：
1.state
自然為reducer的狀態(tài)
2.dispatch
這個(gè)是一個(gè)函數(shù)，有dispatch就意味著我們可以不用像使用redux時(shí)還需要自己下中間件（如redux-thunk）就可以進(jìn)行異步操作，具體看asyncIncrement函數(shù),參數(shù)為一個(gè)對(duì)象，指定需要執(zhí)行的action
再說useReducer函數(shù)的參數(shù)：
第一個(gè)參數(shù)為你引入的reducer，第二個(gè)參數(shù)為state的默認(rèn)值，第三個(gè)參數(shù)為初始觸發(fā)的action，就是載入時(shí)默認(rèn)就執(zhí)行一個(gè)action

4.useMemo
useMemo只有當(dāng)其中一個(gè)輸入發(fā)生變化時(shí)，才會(huì)重新計(jì)算記憶值。此優(yōu)化有助于避免在每個(gè)渲染上進(jìn)行昂貴的計(jì)算。
此鉤子也是有助于性能優(yōu)化，接入上面的useReducerDemo組件，往里添加

const [tips,setTips] = useState(false);
//當(dāng)為0時(shí)提示不能再減了
useEffect(()=>{
    if(!state.count){
        setTips(true);
    }else{
        setTips(false);
    }
});
const memoizedValue = useMemo(() => {
    console.log("useMemo run");
    return tips
}, [tips]);

在return組件元素div里添加

{
    memoizedValue && 
不能為負(fù)數(shù)哦
}

以上新增的代碼時(shí)為了實(shí)現(xiàn)在reducer里的count小于等于0或從0變更為其他數(shù)字時(shí)更新true或false，以此達(dá)到p元素的顯示與否，否則一直為上一次計(jì)算得到值，我們使用了console.log("useMemo run");記錄它更新的次數(shù)，當(dāng)count從0一直+1，只會(huì)打印一次"useMemo run"，由此說明，只在0變成1的時(shí)候執(zhí)行了一次，往后memoizedValue的值一直為0變成1時(shí)所return的值。
此例子并說明不了什么，不過當(dāng)有很龐大計(jì)算量的時(shí)候就能體現(xiàn)出useMemo的作用了。
useMemo同樣也是一個(gè)函數(shù)，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為函數(shù)，第二個(gè)參數(shù)為要比對(duì)的值，返回一個(gè)值。
第二個(gè)參數(shù)里可以傳入多個(gè)值，如[a,b,c,...]，當(dāng)傳入的這些值有變化時(shí)，就會(huì)去執(zhí)行第一個(gè)傳入的函數(shù)，根據(jù)業(yè)務(wù)需求計(jì)算后返回最終結(jié)果。
同理，第二個(gè)參數(shù)傳入的值沒有更新時(shí)，不會(huì)執(zhí)行。

結(jié)尾
花了一下午的時(shí)間體驗(yàn)hook，其他的鉤子也使用了個(gè)遍，感覺這四個(gè)在我看來和在我公司業(yè)務(wù)里可能會(huì)大量的使用到，所以發(fā)此文章分享，也為記錄，本人新手前端一枚，第一次寫文章，有說的不對(duì)的地方還請(qǐng)請(qǐng)多多指教。
謝謝大家的閱讀。
以上代碼的github地址為react-hooks初體驗(yàn)