react中hook是什麼-前端問答-PHP中文網

react中hook是什麼

WBOY

發布： 2022-05-18 20:40:37

原創

4362 人瀏覽過

在react中，hook是React16.8新增的特性，用於在不寫class的情況下使用state及其他的react特性；可以用函數元件去使用react中的一些特性，也可以讓函數元件也擁有狀態，透過自訂hook實現在元件間公用狀態操作。

react中hook是什麼

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中hook是什麼

react hook是react中引入新特性，它可以讓react函數元件也擁有狀態；

透過自訂hook可以實現在元件間公用狀態操作；

意義：Hook 是React 16.8 的新增特性。它可以讓你在不寫 class 的情況下使用 state 以及其他的 React 特性。簡單來說就是可以使用函數元件去使用react中的一些特性

所要解決的問題：

解決元件之間復用狀態邏輯很難得問題， hook能解決的就是在你無需修改之前元件結構的情況下復用狀態邏輯，在不使用hook的情況下，需要使用到一些高級的用法如高級組件、provider、customer等，這種方式對於新手來說不太友好，可能在理解上就比較的困難

對於複雜組件可以去拆分其邏輯，例如在你使用生命週期函數時，不同的生命週期需要在不同的時刻進行，因此在此時對於複雜的元件來說，有的生命週期函數中就存在大量的邏輯，在可讀性上面就大打折扣。當使用hook時，就可以進行元件邏輯的劃分，將相同的邏輯給整合在一起，這樣就大大增加可讀性也在一方面利於維護

#不需要對於class元件的理解，當當你最初去學習時，你不得不去理解this這個關鍵字，在當前組件所表示的含義，但是在hook中就不需要。能夠解決你在不使用class元件的情況下去體現react的特性

需要注意的一點就是hook和class元件是不能夠同時使用的，在實際的使用過程中一定要注意，否則就會出現報錯。

react-hook的用法

react提供了useState、useEffect兩個hook函數來建立stack hook和effect hook

#state hook

在函數元件內使用useState可以給元件使用狀態；

useState的入參為初始狀態，出參為目前state以及更新state的函數；

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第一次執行時會建立一個狀態，之後執行都是使用這個狀態；

#effect hook

使用useEffect可以為元件增加副作用邏輯；

所謂副作用個人理解是與react範圍外的世界產生的交互，如dom操作、網絡請求等(說實話，副作用具體是啥我還沒完全弄明白)；

useEffect入參有兩個第一個參數是副作用函數、第二個參數是個用來判斷是否執行副作用的陣列；

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

登入後複製

副作用有一個執行過程和一個可選的清除過程，副作用函數定義了執行過程，它的返回值函數定義了清除過程；

在元件函數中定義的副作用像是渲染結果的一部分，副作用在每次渲染後都會執行，在渲染前、元件銷毀前清除之前的副作用；這樣做使得我們的副作用可以讀到每次的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);
    };
  });
  // ...
}

登入後複製

如果不想每次渲染都執行副作用，可以給useEffect第二個參數傳一數組，當陣列中的元素沒有變化時，不會觸發副作用；

自訂hook

自訂hook其實就是個內部使用了useState、useEffect的普通函數，且函數名稱以use開頭；

使用自訂hook可以將元件邏輯提取到可重用的函數中；

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效能優化的注意事項

推薦學習：《react影片教學》

以上是react中hook是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！