reacthook釋出也已經有幾個月了，相信有部分人已經開始使用了，還有些人在猶豫要不要用，可能更多人安於現狀，沒有要用的打算，甚至還有很多公司的react版本是15或以下的，迫於升級的難度沒有使用。以我個人的觀點，要不要使用react hook呢？

建議用的的人

1. 專案react版本已經是react16了
2. 新建的專案
3. 一直對新技術保持關注，躍躍欲試的人
4. 對函數語言程式設計愛好的人
5. 對react的componentDidMount，componentWillReceiverProps，componentDidUpdate厭煩，甚至因為重新渲染整天在頭疼的人

不建議用的人

1. 對react hook極其厭惡，對react生命週期程式設計是非愛好的人。
2. 只要你想，沒有不建議用的人，包括第一類人。

這只是我個人的建議，我現在用的週期也不長，我們的專案是react 16的，並且團隊裡只有我自己在寫ract hook。幸好react hook和生命週期程式設計方式是完全相容的。

那麼其實react hook的特點和優點其實也顯露出來了。

1. 沒有了顯性的生命週期，所有渲染後的執行方法都在useEffect裡面統一管理
2. 函數語言程式設計，你不需要定義constructor，render，定義class
3. 某一個元件，方法需不需要渲染，重新執行完全取決於你，而且十分方便管理
4. 肯定還有我沒發掘的優點

針對以上的特點優點我逐一說明，對於特別基礎的用法我就不大篇長論了，建議參考官網的說明文件：react官網

1. 沒有了顯性的生命週期，所有渲染後的執行方法都在useEffect裡面統一管理

上程式碼(偽)：

function getData(id) {
    const [data, setData] = useState({});
    useEffect(() => {
        const data = api.getData(id);
        setData(data);
    }, [id]);
    return <div>{data.name}</div>
}

這是根據id獲取資料顯示name的元件。
因為這個id是外部傳入的，在以前你需要再didMount，willReceiverProps裡面去判斷是否傳入的和當前的不一樣，然後去獲取資料，但是這裡就不用了。直接整合在useEffect裡面。最關鍵的是第二個引數[id]。這個引數的意思是id變了才進入裡面的方法執行，方然第一次必執行。當然我說的不全面，大致是這個意思，還有更復雜的場景，反正這種方式類似於監聽id，id變了就執行，這不就是我們的最終目的嗎？react以前分那麼多週期其實就是處理這一件事情

2. 函數語言程式設計，你不需要定義constructor，render，定義class

這個就不用多說了吧

function heihei() {
    const [count, setCount] = useState(0);
    return (
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>增加count</button>
        </div>
    )
}

no生命週期，no class，一切都是函數語言程式設計

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

3. 某一個元件，方法需不需要渲染，重新執行完全取決於你，而且十分方便管理

這裡主要講兩個方法，useMemo和useCallback
先看useCallback
之前如果我們在render中定義了一個方法：

render() {
    const {data} = this.state;
    const filter = data.filter(e => e.id !== 5);
    ...
}

那麼我們知道每次render都會執行filter這個方法，其實你是不是覺得當data沒變這個方法只要執行一次就好了，看看react hook怎麼做的

function demo() {
    ...
    const filter = useCallback(() => {
        data.filter(e => e.id !== 5)
    }, [data])
    ...
}

看懂了嗎？這個完全就是我之前提出來的思路啊，它把這個方法執行的結果快取起來了！！！後面的[data]就是當data不變，也不會多執行。
同樣的道理，對於一個元件，用useMemo就好啦

const mainInfoMemo = useMemo(() => {
    return MAIN_INFO.map(e => (
        <div key={e.key}><b>{e.label}</b>：
            {curSubject[e.key]}
        </div>
    ));
}, [curSubject]);

當curSubject不變，當你用這個元件的時候一直不會再次渲染。