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

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. 肯定還有我沒發掘的優點

上**(偽)：

function getdata(id) );
useeffect(() => , [id]);
return >div
>
}

這是根據id獲取資料顯示name的元件。

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

這個就不用多說了吧

function heihei() 
增加countbutton>
div>
)}

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

廣州品牌設計公司

這裡主要講兩個方法，usememo和usecallback

先看usecallback

之前如果我們在render中定義了乙個方法：

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

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

function demo() , [data])
...}

看懂了嗎？這個完全就是我之前提出來的思路啊，它把這個方法執行的結果快取起來了！！！後面的[data]就是當data不變，也不會多執行。

同樣的道理，對於乙個元件，用usememo就好啦

const maininfomemo = usememo(() => >b>：
div>
));}, [cursubject]);

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

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

React Hook 的簡單使用

超實用的jQuery分頁外掛程式

實用的git log用法

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

React Hook 的簡單使用

超實用的jQuery分頁外掛程式

實用的git log用法

相關推薦