03. 該嘗嘗React Hook了。

cikenerd 發布于2019-08-26 10:43 / 1503人閱讀

摘要：我們統一把這些操作稱為副作用，或者簡稱為作用。盡可能使用標準的以避免阻塞視覺更新。大多數情況下，不需要同步地執行。返回的對象在組件的整個生命周期內保持不變。當對象內容發生變化時，并不會通知你。

Hook

Hook 是 React 16.8.0 的新增特性。

Hook 使你在非 class 的情況下可以使用更多的 React 特性。Hook 不能在 class 組件中使用。

使用規則：

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

只能在 React 的函數組件中調用 Hook。不要在其他 JavaScript 函數中調用。

State Hook

useState

使用useState可以不通過class組件而在函數組件內使用state，可通過多次調用聲明多個state

參數：

useState() 方法里面唯一的參數就是初始 state。

返回值：

當前 state 以及更新 state 的函數。

函數式更新：

如果新的 state 需要通過使用先前的 state 計算得出，那么可以將函數傳遞給 setState。該函數將接收先前的 state，并返回一個更新后的值。

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      
      
      
    
  );
}

Effect Hook

Effect Hook 可以讓你在函數組件中執行副作用操作（在 React 組件中執行過數據獲取、訂閱或者手動修改過 DOM。我們統一把這些操作稱為“副作用”，或者簡稱為“作用”。）

useEffect

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數的組合。

useEffect 會在每次渲染后（第一次渲染之后和每次更新之后）都執行，如果你的 effect 返回一個函數，React 將會在組件卸載的時候執行清除操作時調用它。

useEffect在組件內可多次調用，Hook 允許我們按照代碼的用途分離他們，React 將按照 effect 聲明的順序依次調用組件中的每一個 effect。

使用位置：

組件內部調用 useEffect。將 useEffect 放在組件內部讓我們可以在 effect 中直接訪問 count state 變量（或其他 props）。

性能優化：

useEffect 的第二個可選參數可以實現如果某些特定值在兩次重渲染之間沒有發生變化，你可以通知 React 跳過對 effect 的調用。請確保數組中包含了所有外部作用域中會隨時間變化并且在 effect 中使用的變量

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

示例代碼詳解 useState 與 useEffect ：

// 引入 React 中的 useState Hook。它讓我們在函數組件中存儲內部 state
// 引入 useEffect
import React, { useState, useEffect } from "react";

function Example(props) {
  // 聲明了一個叫 count 的 state 變量，然后把它設為 0
  const [count, setCount] = useState(0);
  // 聲明第2個state
  const [isOnline, setIsOnline] = useState(null);

  // 無需清除的 effect
  useEffect(() => {
    // 將 document 的 title 設置為包含了點擊次數的消息。
    document.title = `You clicked ${count} times`;
  });
  
  // 需要清除的 effect
  useEffect(() => {
    function handleFn(val) {
      setIsOnline(val);
    }
    // 注冊監聽
    XXAPI.subscribe(handleFn);
    // 清除監聽
    return () => {
      XXAPI.unsubscribe(handleFn);
    };
  });

  return (
    
      // 讀取 State: 我們可以直接用 count
      You clicked {count} times
      // 更新 State: 可以通過調用 setCount 來更新當前的 count
      
    
  );
}

useLayoutEffect

其函數簽名與 useEffect 相同，但它會在所有的 DOM 變更之后同步調用 effect。可以使用它來讀取 DOM 布局并同步觸發重渲染。在瀏覽器執行繪制之前，useLayoutEffect 內部的更新計劃將被同步刷新。盡可能使用標準的 useEffect 以避免阻塞視覺更新。

與 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 調度的 effect 不會阻塞瀏覽器更新屏幕，這讓你的應用看起來響應更快。大多數情況下，effect 不需要同步地執行。在個別情況下（例如測量布局），這時需要用到useLayoutEffect

useRef

useRef 返回一個可變的 ref 對象，其 .current 屬性被初始化為傳入的參數（initialValue）。返回的 ref 對象在組件的整個生命周期內保持不變。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已掛載到 DOM 上的文本輸入元素
    inputEl.current.focus();
  };
  return (
    <>
      
      
    
  );
}

useRef() 比 ref 屬性更有用。它可以很方便地保存任何可變值，其類似于在 class 中使用實例字段的方式。當 ref 對象內容發生變化時，useRef 并不會通知你。變更 .current 屬性不會引發組件重新渲染。

自定義Hook

自定義Hook 是一個函數，其名稱以 use 開頭(必須以 use 開頭)，函數內部可以調用其他的 Hook。自定義Hook用于提取多組件之間的共享邏輯，可用于替代 render props 和 HOC。

在需要共享邏輯的組件內調用很簡單，只需要引入定義好的自定義Hook，并傳入自己想要的參數拿到你想要的返回值作用于當前組件。

如下例：

提取自定義Hook：

import React, { useState, useEffect } from "react";

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;
}

使用自定義Hook：

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    
      {props.friend.name}
    
  );
}

原文git地址覺得有用的話，來個star鼓勵，持續更新中。

云服務器 GPU云服務器購買了域名之后該干嘛 hook 逆向 hook java hook

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106656.html

react與redux通信之hook

摘要：新方案隨著的發布，功能正式投入使用。那么，如果我們使用了，又該如何跟通信呢針對于這個問題，業界有人提供了一個取代的新插件。提供的創建上下文，返回該對象。可以預見的是，當你使用了，會在項目中逐漸把消滅，最后跟語法糖告別，回歸函數的世界。 react和redux建立通信的方式有2種方案：老方案connect 新方案hook 老方案connect 曾經，我們會使用connect建立r...

lemon 2019-08-23 17:08 評論0 收藏0
快速了解 React Hooks 原理

摘要：使用該對象，可以跟蹤屬于組件的各種元數據位。調用你的組件這意味著它知道存儲的元數據對象。下一次渲染會發生什么需要重新渲染組件由于之前已經看過這個組件，它已經有了元數據關聯。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！我們大部分 React 類組件可以保存狀態，而函數組件不能？并且類組件具有生命周期，而函數組件卻不能...

Hydrogen 2019-08-26 14:04 評論0 收藏0
React Hook 不完全指南

摘要：使用完成副作用操作，賦值給的函數會在組件渲染到屏幕之后。如此很容易產生，并且導致邏輯不一致。同時，這也是很多人將與狀態管理庫結合使用的原因之一。當我們通過的第二個數組類型參數，指明當前的依賴，就能避免不相關的執行開銷了。前言本文內容大部分參考了 overreacted.io 博客一文，同時結合 React Hook 官方文章，整理并歸納一些筆記和輸出個人的一些理解什么是 Hoo...

Lin_R 2019-08-26 13:50 評論0 收藏0
10分鐘了解react新特性hooks

摘要：簡介是的新增特性。我們統一把這些操作稱為副作用，或者簡稱為作用。由于副作用函數是在組件內聲明的，所以它們可以訪問到組件的和。副作用函數還可以通過返回一個函數來指定如何清除副作用。目前為止，有兩種主流方案來解決這個問題高階組件和。 Hook 簡介 Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。 us...

hlcfan 2019-08-26 13:58 評論0 收藏0
React Hooks入門: 基礎

摘要：當組件安裝和更新時，回調函數都會被調用。好在為我們提供了第二個參數，如果第二個參數傳入一個數組，僅當重新渲染時數組中的值發生改變時，中的回調函數才會執行。前言　　首先歡迎大家關注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵，希望大家多多關注呀！React 16.8中新增了Hooks特性，并且在React官方文檔中新增...

mrli2016 2019-08-23 15:36 評論0 收藏0