React Hooks

一.useState

hooks就是在函數(shù)組件中使用state通過useState實現(xiàn)的澜术。

useState傳入一個初始值,生成一個數(shù)組膳汪,數(shù)組的第一位就是設置的變量茄袖,這里是count,第二位是對變量進行改變的函數(shù)雏胃,這里是setCount踢步,可以對count進行修改的。

二.useEffect

useEffect相當于react的componentDidMount丑掺,componentDidUpdate获印,componentWillUnmount?三個生命周期函數(shù)的組合,

useEffect能夠返回一個函數(shù)街州,用來清除上一次副作用留下的狀態(tài)兼丰。

useEffect還可以傳第二個參數(shù):

1.什么都不傳,組件每次?render?之后?useEffect?都會調用,相當于componentDidMount?和?componentDidUpdate蛹锰;

2.傳入一個空數(shù)組 [], 只會調用一次狼讨,相于componentDidMount和componentWillUnmount;

3.傳入一個數(shù)組艳丛,其中包括變量,只有這些變量變動時趟紊,useEffect?才會執(zhí)行氮双。

三.useContext

useContext的使用相當于react中的父組件傳值子組件,首先需要去創(chuàng)建一個context用createContext霎匈,然后通過創(chuàng)建的context提供value給其子組件戴差,最后在子組件里面使用這個context就用到了useContext。

四.useReducer

userReducer的思想和redux相似铛嘱,useReducer接收兩個參數(shù)暖释,第一個參數(shù)是一個函數(shù),第二個參數(shù)是useReducer變量的初始值墨吓,它返回一個變量和一個dispatch函數(shù)球匕,再通過dispatch來改變變量。

五.useMemo

useMemo用來緩存數(shù)據(jù)帖烘,數(shù)據(jù)是需要通過計算而來亮曹,就可以用這個函數(shù)來緩存這個數(shù)據(jù),以至于我們在修改它們沒有依賴的數(shù)據(jù)源的情況下,多次調用這個計算函數(shù)乾忱,浪費計算資源讥珍。

上面的例子中只有當性別改變的時候才會調用changeSex方法,姓名的改變不會調用該方法窄瘟,可以節(jié)省資源衷佃。

六.useCallback

緩存一個函數(shù),這個函數(shù)如果是父組件傳遞給子組件蹄葱,或者自定義hooks里面的函數(shù)氏义,可以緩存這個函數(shù),不用每次重新聲明新的函數(shù)图云,避免釋放內(nèi)存惯悠、分配內(nèi)存的計算資源浪費,子組件不會因為這個函數(shù)的變動重新渲染竣况。

七.useRef

useRef和ref非常相似克婶,useRef可以獲取dom還可以存儲值。

上面的例子中丹泉,剛開始的inputEl是獲取了dom情萤,后來的textRef是存儲了text這個值。

對于react hooks的介紹就這么多了摹恨,以上是react hooks中常用的函數(shù)筋岛,前三個函數(shù)是react hooks中最基本的函數(shù)。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末晒哄,一起剝皮案震驚了整個濱河市睁宰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌寝凌,老刑警劉巖柒傻,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異硫兰,居然都是意外死亡诅愚,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門劫映,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人刹前,你說我怎么就攤上這事泳赋。” “怎么了喇喉?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵祖今,是天一觀的道長。 經(jīng)常有香客問我,道長千诬,這世上最難降的妖魔是什么耍目? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮徐绑,結果婚禮上邪驮,老公的妹妹穿的比我還像新娘。我一直安慰自己傲茄,他們只是感情好毅访,可當我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盘榨,像睡著了一般喻粹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上草巡,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天守呜,我揣著相機與錄音,去河邊找鬼山憨。 笑死弛饭,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的萍歉。 我是一名探鬼主播侣颂,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼枪孩!你這毒婦竟也來了憔晒?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤蔑舞,失蹤者是張志新(化名)和其女友劉穎拒担,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體攻询,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡从撼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了钧栖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片低零。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖拯杠,靈堂內(nèi)的尸體忽然破棺而出掏婶,到底是詐尸還是另有隱情,我是刑警寧澤潭陪,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布雄妥,位于F島的核電站最蕾,受9級特大地震影響,放射性物質發(fā)生泄漏老厌。R本人自食惡果不足惜瘟则,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望枝秤。 院中可真熱鬧醋拧,春花似錦、人聲如沸宿百。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽垦页。三九已至雀费,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痊焊,已是汗流浹背盏袄。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留薄啥,地道東北人辕羽。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像垄惧,于是被迫代替她去往敵國和親刁愿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容