React Hook基本使用

簡單說一下為什么我會了解到Hook API吧。之前寫React只會用class組件的方法，但是新項目使用到了HOOK，然后被迫學習這個API。

為什么要使用Hook？

根據官方文檔介紹：Hook是React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。

Effect Hook

了解這個API之前先弄懂兩個名詞“副作用”與“作用”。其實他們是等同的是 你之前在使用React組件中執行過數據獲取、訂閱或者手動修改過的操作。

useEffect就是一個Effect Hook，給函數組件增加了操作副作用的能力。它與class組件中的componentDidMount、componentDidUpdat和componentWillUnmount作用相同。只是被合成了一個API。

使用：

import React, {useState, useEffect } from 'react';
function Demo() {
   const [count, setCount] = useState() ;
   // 相當於componentDidMount 和 componentDidUpdate:
   useEffect(() => {
       // 使用瀏覽器API更新頁面標題
       document.title = 'You clicked ${count} times';
    }) ;
    return (
      <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
           Click me  
      </div>
    )
}         

　　當你調用useEffect時。就是告訴React在完成對Dom的更改后運行你的'副作用'函數。

但是上面這個Demo存在一個問題。就是頁面會一直調用userEffect里的內容，導致性能問題。

解決方法：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 僅在 count 更改時更新

當我們使用[count]為第二個參數時，它便會去監聽state里的count如果一致則不執行effect，如果不一致,React會再次調用effect.且數組中如果有多個元素，只要其中一個改變也會在次調用effect。

如果你傳入一個空數組（[]）,那么你將只會運行一次effect（僅在組件掛載和卸載時執行）這就告訴React你的effect不依賴於props或state中的任何值。effect內部的props和state就會一直擁有其初始值。

清除effect

在React class中，我們通常會用componentDidMount中設置訂閱，並在componentWillUnmount中清除。下面是effect清除

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除訂閱
    subscription.unsubscribe();
  };
});

清除可以防止引起內在泄漏，而清除的處理是在React組件卸載時執行。

Hook使用規則注意

1.只能在函數最外層調用Hook。不能在循環、條件或者子函數中調用 。

2.只能在React的函數組件中調用Hook。

 搜集知識點來源：

1）https://zh-hans.reactjs.org/docs/hooks-intro.html（React官網）