react hook介紹

react hook是什么

react hook是react中引入新特性严嗜,它可以讓react函數(shù)組件也擁有狀態(tài)晋涣;
通過自定義hook可以實(shí)現(xiàn)在組件間公用狀態(tài)操作笨鸡;

react-hook的用法

react提供了useState扮叨、useEffect兩個(gè)hook函數(shù)來創(chuàng)建stack hook和effect hook

state hook

在函數(shù)組件內(nèi)使用useState可以給組件使用狀態(tài)唁情;
useState的入?yún)槌跏紶顟B(tài),出參為當(dāng)前state以及更新state的函數(shù)甫匹;

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState第一次執(zhí)行時(shí)將創(chuàng)建一個(gè)狀態(tài),之后執(zhí)行都是使用這個(gè)狀態(tài)惦费;

effect hook

使用useEffect可以給組件添加副作用邏輯兵迅;
所謂副作用個(gè)人理解是與react范圍外的世界產(chǎn)生的交互,如dom操作薪贫、網(wǎng)絡(luò)請求等(說實(shí)話,副作用具體是啥我還沒完全弄明白);
useEffect入?yún)⒂袃蓚€(gè)第一個(gè)參數(shù)是副作用函數(shù)腰根、第二個(gè)參數(shù)是個(gè)用于判斷是否執(zhí)行副作用的數(shù)組累澡;

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

副作用有一個(gè)執(zhí)行過程和一個(gè)可選的清除過程,副作用函數(shù)定義了執(zhí)行過程鞍匾,它的返回值函數(shù)定義了清除過程交洗;
在組件函數(shù)中定義的副作用像是渲染結(jié)果的一部分,副作用在每次渲染后都會(huì)執(zhí)行橡淑,在渲染前构拳、組件銷毀前清除之前的副作用;這樣做使得我們的副作用可以讀到每次的props梁棠、state置森;

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

如果不想每次渲染都執(zhí)行副作用,可以給useEffect第二個(gè)參數(shù)傳一數(shù)組符糊,當(dāng)數(shù)組中的元素沒有變化時(shí)凫海,不會(huì)觸發(fā)副作用;

自定義hook

自定義hook其實(shí)就是個(gè)內(nèi)部使用了useState男娄、useEffect的普通函數(shù)行贪,并且函數(shù)名以use開頭漾稀;
使用自定義hook可以將組件邏輯提取到可重用的函數(shù)中;

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

TODO
render props瓮顽、高階組件县好、effect性能優(yōu)化的注意事項(xiàng)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市暖混,隨后出現(xiàn)的幾起案子缕贡,更是在濱河造成了極大的恐慌,老刑警劉巖拣播,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件晾咪,死亡現(xiàn)場離奇詭異,居然都是意外死亡贮配,警方通過查閱死者的電腦和手機(jī)谍倦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來泪勒,“玉大人昼蛀,你說我怎么就攤上這事≡泊妫” “怎么了叼旋?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長沦辙。 經(jīng)常有香客問我夫植,道長,這世上最難降的妖魔是什么油讯? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任详民,我火速辦了婚禮,結(jié)果婚禮上陌兑,老公的妹妹穿的比我還像新娘沈跨。我一直安慰自己,他們只是感情好诀紊,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布谒出。 她就那樣靜靜地躺著,像睡著了一般邻奠。 火紅的嫁衣襯著肌膚如雪笤喳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天碌宴,我揣著相機(jī)與錄音杀狡,去河邊找鬼。 笑死贰镣,一個(gè)胖子當(dāng)著我的面吹牛呜象,可吹牛的內(nèi)容都是我干的膳凝。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼恭陡,長吁一口氣:“原來是場噩夢啊……” “哼蹬音!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起休玩,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤著淆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后拴疤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體永部,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年呐矾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了苔埋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,861評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蜒犯,死狀恐怖组橄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情罚随,我是刑警寧澤晨炕,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站毫炉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏削罩。R本人自食惡果不足惜瞄勾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望弥激。 院中可真熱鬧进陡,春花似錦、人聲如沸微服。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽以蕴。三九已至糙麦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間丛肮,已是汗流浹背赡磅。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宝与,地道東北人焚廊。 一個(gè)月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓冶匹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親咆瘟。 傳聞我的和親對象是個(gè)殘疾皇子嚼隘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評論 2 361

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

  • 主要介紹 useState useEffect useReducer useContext 用法 你還在為...
    叫我蘇軾好嗎閱讀 27,420評論 3 41
  • 你還在為該使用無狀態(tài)組件(Function)還是有狀態(tài)組件(Class)而煩惱嗎?——擁有了hooks袒餐,你再也不需...
    水落斜陽閱讀 82,331評論 11 100
  • React是現(xiàn)在最流行的前端框架之一飞蛹,它的輕量化,組件化匿乃,單向數(shù)據(jù)流等特性把前端引入了一個(gè)新的高度桩皿,現(xiàn)在它又引入的...
    老鼠AI大米_Java全棧閱讀 5,780評論 0 26
  • 你還在為該使用無狀態(tài)組件(Function)還是有狀態(tài)組件(Class)而煩惱嗎?——擁有了hooks幢炸,你再也不需...
    米亞流年閱讀 944評論 0 5
  • 仔細(xì)觀察身邊很多人泄隔,他們有個(gè)共同的特點(diǎn)就是都好為人師。 他們有類似的口頭禪——你懂我的意思不宛徊,叭啦...
    樂賀樂賀閱讀 515評論 1 1