成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

react hook實(shí)用的用法和技巧分析

CntChen / 1408人閱讀

摘要：以我個(gè)人的觀(guān)點(diǎn)，要不要使用呢建議用的的人項(xiàng)目版本已經(jīng)是了新建的項(xiàng)目一直對(duì)新技術(shù)保持關(guān)注，躍躍欲試的人對(duì)函數(shù)式編程愛(ài)好的人對(duì)的，，厭煩，甚至因?yàn)橹匦落秩菊煸陬^疼的人不建議用的人對(duì)極其厭惡，對(duì)生命周期編程是非愛(ài)好的人。

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

建議用的的人

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

新建的項(xiàng)目

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

對(duì)函數(shù)式編程愛(ài)好的人

對(duì)react的componentDidMount，componentWillReceiverProps，componentDidUpdate厭煩，甚至因?yàn)橹匦落秩菊煸陬^疼的人

不建議用的人

對(duì)react hook極其厭惡，對(duì)react生命周期編程是非愛(ài)好的人。

只要你想，沒(méi)有不建議用的人，包括第一類(lèi)人。

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

那么其實(shí)react hook的特點(diǎn)和優(yōu)點(diǎn)其實(shí)也顯露出來(lái)了。

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

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

1. 沒(méi)有了顯性的生命周期，所有渲染后的執(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的組件。
因?yàn)檫@個(gè)id是外部傳入的，在以前你需要再didMount，willReceiverProps里面去判斷是否傳入的和當(dāng)前的不一樣，然后去獲取數(shù)據(jù)，但是這里就不用了。直接集成在useEffect里面。最關(guān)鍵的是第二個(gè)參數(shù)[id]。這個(gè)參數(shù)的意思是id變了才進(jìn)入里面的方法執(zhí)行，方然第一次必執(zhí)行。當(dāng)然我說(shuō)的不全面，大致是這個(gè)意思，還有更復(fù)雜的場(chǎng)景，反正這種方式類(lèi)似于監(jiān)聽(tīng)id，id變了就執(zhí)行，這不就是我們的最終目的嗎？react以前分那么多周期其實(shí)就是處理這一件事情

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

這個(gè)就不用多說(shuō)了吧

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

            {count}
            
        

    )
}

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

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

這里主要講兩個(gè)方法，useMemo和useCallback
先看useCallback
之前如果我們?cè)趓ender中定義了一個(gè)方法：

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

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

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

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

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

    ));
}, [curSubject]);

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

4. 肯定還有我沒(méi)發(fā)掘的優(yōu)點(diǎn)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104018.html

相關(guān)文章

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

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

    xi4oh4o 評(píng)論0 收藏0

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

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

    tommego 評(píng)論0 收藏0

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

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

    APICloud 評(píng)論0 收藏0

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

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

    Soarkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<