一個(gè)很有意思的hook庫(kù)：react

1、一個(gè)很有意思的hook庫(kù)：react前言 千呼萬(wàn)喚始出來(lái)，react hooks最終在react 16.8版本中發(fā)布穩(wěn)定版了。最近逛github發(fā)覺(jué)了一個(gè)很故意思的庫(kù)：react-hanger。 復(fù)習(xí)react hooks 假如對(duì)hooks還不怎么了解的學(xué)生，建議去看一下官方文檔：introducing hooks. 什么是 hooks? 我們都知道，在hooks之前，開發(fā)react組件主要是class組件和function組件。function組件沒(méi)有state，所以也叫sfc（stateless functional component），容易的將props映射成view；class組件有

2、state，能夠處理越發(fā)復(fù)雜的規(guī)律。但是基于class的組建并不是完善的，總結(jié)起來(lái)就像dan說(shuō)的那樣，有三個(gè)主要的問(wèn)題： 代碼重用：在hooks出來(lái)之前，頻繁的代碼重用方式是hocs和render props，這兩種方式帶來(lái)的問(wèn)題是：你需要解構(gòu)自己的組件，十分的粗笨，同時(shí)會(huì)帶來(lái)很深的組件嵌套 復(fù)雜的組件規(guī)律：在class組件中，有許多的lifecycle 函數(shù)，你需要在各個(gè)函數(shù)的里面去做對(duì)應(yīng)的事情。這種方式帶來(lái)的痛點(diǎn)是：規(guī)律簇?fù)碓诟魈?，開發(fā)者去維護(hù)這些代碼會(huì)簇?fù)碜约旱木?，理解代碼規(guī)律也很吃力 class組件的困窘：對(duì)于初學(xué)者來(lái)說(shuō)，需要理解class組件里面的this是比較吃力的(這個(gè)理由有點(diǎn)

3、牽強(qiáng)——)，同時(shí)，基于class的組件難以優(yōu)化(舉個(gè)不恰當(dāng)?shù)睦?，看一下babel轉(zhuǎn)移出來(lái)的class代碼量增長(zhǎng)了多少) 為了解決上面的這三個(gè)問(wèn)題，react hooks提案登場(chǎng)了，它有以下幾個(gè)特點(diǎn)： 無(wú)痛接入，不破壞現(xiàn)有的項(xiàng)目結(jié)構(gòu) 徹低向后兼容，不包含任何不兼容breaking changes 現(xiàn)在就能用法 hooks 允許你在不編寫 class 的狀況下用法狀態(tài)(state)和其他 react 特性。 你還可以構(gòu)建自己的 hooks, 跨組件分享可重用的有狀態(tài)規(guī)律。 現(xiàn)在react中內(nèi)置的hooks有： basic hooks usestate useeffect

4、usecontext additional hooks usereducer usecallback usememo useref useimperativehandle uselayouteffect usedebugvalue 固然了，授之以魚不如授之以漁，react官方也提供了教你如何封裝自己hook的文檔building your own hooks，有愛(ài)好的小伙伴可以去閱讀一下。 react-hanger初窺 大致的看了下react-hanger的源碼之后發(fā)覺(jué)，這個(gè)庫(kù)其實(shí)是對(duì)react hooks api的適用性封裝。裸露一些更常用的hooks節(jié)約大家造輪子的工作量。 react的核

5、心開發(fā)者dan看到這個(gè)庫(kù)也做了評(píng)價(jià): 一個(gè)對(duì)hooks的隱喻。你可以將你的state掛起在你的function component上，等你回歸的時(shí)候，它就掛在那。 本文寫作時(shí)，react-hanger的usage里提供了6個(gè)api，從名字里就可以看出這些hook都是做什么的(hooks都以"use"開始，這是一種商定)， import useinput, useboolean, usenumber, usearray, useonmount, useonunmount from "react-hanger" 用法起來(lái)也很容易，比如usenumber const app = () = const showcounter = useboolean(true); const counter = usenumber(0); return ( increase showcounter.value && counter.value decrease ); ; 初步印象：大致與原始的basic hooks有點(diǎn)不同的是，usestate返回一個(gè)數(shù)組，分離是值與操作，而react-hanger提供的api貌似是將值和一些操作封裝到一個(gè)對(duì)象中，比如counter就是一