react hook實用的用法和技巧分析

CntChen 發布于2019-08-23 17:14 / 1346人閱讀

摘要：以我個人的觀點，要不要使用呢建議用的的人項目版本已經是了新建的項目一直對新技術保持關注，躍躍欲試的人對函數式編程愛好的人對的，，厭煩，甚至因為重新渲染整天在頭疼的人不建議用的人對極其厭惡，對生命周期編程是非愛好的人。

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

建議用的的人

項目react版本已經是react16了

新建的項目

一直對新技術保持關注，躍躍欲試的人

對函數式編程愛好的人

對react的componentDidMount，componentWillReceiverProps，componentDidUpdate厭煩，甚至因為重新渲染整天在頭疼的人

不建議用的人

對react hook極其厭惡，對react生命周期編程是非愛好的人。

只要你想，沒有不建議用的人，包括第一類人。

這只是我個人的建議，我現在用的周期也不長，我們的項目是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 {data.name}
}

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

2. 函數式編程，你不需要定義constructor，render，定義class

這個就不用多說了吧

function heihei() {
    const [count, setCount] = useState(0);
    return (
        
            {count}
            
        
    )
}

no生命周期，no class，一切都是函數式編程

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 => (
        {e.label}：
            {curSubject[e.key]}
        
    ));
}, [curSubject]);

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

4. 肯定還有我沒發掘的優點

紙上得來終覺淺，絕知此事要躬行
用了才能發掘更多東西，理解下前端的發展方向，改變以前react的編程習慣
記得收藏哦^^

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104018.html

將函數式進行到底，用 Hooks 武裝組件 - TXD 前端月刊 201905 期

摘要：一個合格的中級前端工程師必須要掌握的個技巧對在畢業季還在找工作的同學，可以說很實用的，如果能全部掌握這些技巧，拿到幾個應該是沒有問題的，當然要注意平時的積累，能力要全面。而且該托管服務是完全免費的。 showImg(https://segmentfault.com/img/remote/1460000019376228?w=1790&h=898); 【阿里云 TXD 前端月刊】- 熱門...

xi4oh4o 2019-08-23 17:56 評論0 收藏0
Hooks + Context：狀態管理的新選擇

摘要：用戶點擊改變全局狀態崔然渲染整顆組件樹有沒有解決方案呢當然有創建一個只接收的新組件，并將組件中的邏輯都移到組件中。最終的示例使用全局狀態和生成全局狀態和崔然完整示例見結論在和出現之前，缺乏自帶的全局狀態管理能力。 React 16.3 版本，正式推了出官方推薦的 context API —— 一種跨層級的數據傳遞方法。React 16.8 版本，推出了全新的 hooks 功能，將原本只...

tommego 2019-08-23 18:31 評論0 收藏0
React Hooks 解析（下）：進階

摘要：第一次了解這項特性的時候，真的有一種豁然開朗，發現新大陸的感覺。在絕大多數情況下，是更好的選擇。唯一例外的就是需要根據新的來進行操作的場景。會保證在頁面渲染前執行，也就是說頁面渲染出來的是最終的效果。上面條規則都是為了保證調用順序的穩定性。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、...

APICloud 2019-08-23 17:04 評論0 收藏0
21個讓React 開發更高效更有趣的工具

摘要：是一個面向開發人員和設計人員的原型工具。這是開發中最常見的擴展插件，并且是開發人員可以用來調試其應用程序的最有用的工具之一。這可能是開發工具包中最重要的工具。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！下列工具中的重要性與排序無關。 1.Webpack Bundle Analyzer 有沒有想過你的應用程序的哪些包或...

Soarkey 2019-08-26 10:43 評論0 收藏0