成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

CntChen / 1364人閱讀

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

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

建議用的的人

項目react版本已經(jīng)是react16了

新建的項目

一直對新技術(shù)保持關(guān)注，躍躍欲試的人

對函數(shù)式編程愛好的人

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

不建議用的人

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

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

這只是我個人的建議，我現(xiàn)在用的周期也不長，我們的項目是react 16的，并且團(tuán)隊里只有我自己在寫ract hook。幸好react hook和生命周期編程方式是完全兼容的。

那么其實react hook的特點和優(yōu)點其實也顯露出來了。

1. 沒有了顯性的生命周期，所有渲染后的執(zhí)行方法都在useEffect里面統(tǒng)一管理
2. 函數(shù)式編程，你不需要定義constructor，render，定義class
3. 某一個組件，方法需不需要渲染，重新執(zhí)行完全取決于你，而且十分方便管理
4. 肯定還有我沒發(fā)掘的優(yōu)點

針對以上的特點優(yōu)點我逐一說明，對于特別基礎(chǔ)的用法我就不大篇長論了，建議參考官網(wǎng)的說明文檔：
react官網(wǎng)

1. 沒有了顯性的生命周期，所有渲染后的執(zhí)行方法都在useEffect里面統(tǒng)一管理

上代碼(偽)：

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

}

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

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

這個就不用多說了吧

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

            {count}
            
        

    )
}

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

3. 某一個組件，方法需不需要渲染，重新執(zhí)行完全取決于你，而且十分方便管理

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

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

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

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

看懂了嗎？這個完全就是我之前提出來的思路啊，它把這個方法執(zhí)行的結(jié)果緩存起來了?。?！后面的[data]就是當(dāng)data不變，也不會多執(zhí)行。
同樣的道理，對于一個組件，用useMemo就好啦

const mainInfoMemo = useMemo(() => {
    return MAIN_INFO.map(e => (
        
{e.label}：
            {curSubject[e.key]}
        

    ));
}, [curSubject]);

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

4. 肯定還有我沒發(fā)掘的優(yōu)點

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104018.html

相關(guān)文章

  • 將函數(shù)式進(jìn)行到底，用 Hooks 武裝組件 - TXD 前端月刊 201905 期

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

    xi4oh4o 評論0 收藏0

  • Hooks + Context：狀態(tài)管理的新選擇

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

    tommego 評論0 收藏0

  • React Hooks 解析（下）：進(jìn)階

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

    APICloud 評論0 收藏0

  • 21個讓React 開發(fā)更高效更有趣的工具

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

    Soarkey 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<