react中hook的概念是什么

本文小編為大家詳細介紹“react中hook的概念是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“react中hook的概念是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在react中，hook是React16.8新增的特性，用于在不編寫class的情況下使用state及其他的react特性；可以用函數組件去使用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;
}

讀到這里，這篇“react中hook的概念是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。