React Hooks 介紹
Hooks 是react16.8新增的未玻,能讓你不通過聲明一個(gè)class來使用state和其他的react特性愧怜。
State Hook 狀態(tài)鉤子
useState是一個(gè)鉤子函數(shù)。 在組件函數(shù)內(nèi)部調(diào)用添加自身的狀態(tài)(state)搔课,React 將保存這個(gè)狀態(tài)變量在兩次渲染期間窍育。useState返回一對(duì)結(jié)果: 當(dāng)前的state和一個(gè)能更新該state的函數(shù)埃儿。這個(gè)函數(shù)類似于this.setState方法器仗,但是不會(huì)將新的state和舊的state合并。
userState為一對(duì)參數(shù)就是初始的state童番。
可以調(diào)用多次userState在一個(gè)組件函數(shù)中精钮,
什么是Hook
Hooks 是能夠讓你在react組件函數(shù)內(nèi)部關(guān)聯(lián)state和生命周期特性的函數(shù)。
React 提供了很少的內(nèi)置Hooks剃斧,類似userState轨香。你可以自己創(chuàng)建自己的Hooks來重復(fù)使用不同組件之間狀態(tài)類的行為。
Effect Hook 影響鉤子
之前你應(yīng)該通過React組件抓取數(shù)據(jù)幼东,訂閱臂容,手動(dòng)改變DOM科雳,我們稱之為邊界影響因?yàn)樗鼈儠?huì)影響其他組件并且不能再渲染時(shí)完成。
影響鉤子 userEffect 在函數(shù)組件中添加完成邊界影響的能力脓杉。它提供了和React class中的componentDidMount糟秘,componentDidUpdate,componentWillUnmount同樣的目的球散,但是它統(tǒng)一成一個(gè)API
當(dāng)你調(diào)用userEffect,你就是正在告知React在DOM刷新后執(zhí)行你的effect,effects函數(shù)在函數(shù)組件內(nèi)部定義尿赚,這樣就可以訪問state和props。React會(huì)執(zhí)行effects函數(shù)在每次渲染完成之后蕉堰,包括第一次渲染凌净。
effect 可以在返回值中保存清除自身的方法。 如在effect內(nèi)部訂閱某個(gè)事件屋讶,在返回中可以保存將其取消的方法冰寻。
Rules of Hooks Hooks的規(guī)范
Hooks 是普通JavaScript 的函數(shù),但它采用了兩個(gè)規(guī)則:
- 在最頂層的作用域調(diào)用Hooks,不要在循環(huán)皿渗、條件和內(nèi)置函數(shù)的作用域調(diào)用
- 只在react 函數(shù)組件中調(diào)用斩芭,不要在普通javascript函數(shù)中調(diào)用
Build Your Own Hooks
有時(shí)候,我們想在不同組件之間重復(fù)使用某些狀態(tài)類邏輯羹奉。原來的版本中秒旋,一般有兩種常見的解決辦法: 高階組件和參數(shù)渲染约计。自定義Hook可以讓你做到這點(diǎn)诀拭。而不用在你的文件中添加新的組件。
這些組件之間的狀態(tài)完全獨(dú)立煤蚌,Hooks是一個(gè)解決重復(fù)使用狀態(tài)類邏輯的方式耕挨,不是狀態(tài)本身。實(shí)際上尉桩,每次調(diào)用Hook都有一個(gè)獨(dú)立的state因此你甚至可以在一個(gè)組件中兩次調(diào)用Hook筒占。
自定義Hook更像是一種約定而不是特性。如果一個(gè)方法名稱已‘use’開頭蜘犁,并且它調(diào)用其他的Hooks翰苫,我們稱它為自定義Hook。userXXX 這個(gè)約定的命名就是我們的lint插件能夠發(fā)現(xiàn)bug的方式
你可以使用自定義Hook來完成很多方面的事情这橙,例如 代理奏窑,動(dòng)畫,聲明訂閱屈扎,定時(shí)器埃唯,和其他我們還沒有考慮到的可能的情況。
Other Hooks
userContext 能讓你不用通過嵌套調(diào)用來獲得上下文
userReducer 能讓你使用reducer來管理本地的狀態(tài)鹰晨。