03. 該嘗嘗React Hook了。

cikenerd 發(fā)布于2019-08-26 10:43 / 1493人閱讀

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

Hook

Hook 是 React 16.8.0 的新增特性。

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

使用規(guī)則：

只能在函數(shù)最外層調(diào)用 Hook。不要在循環(huán)、條件判斷或者子函數(shù)中調(diào)用。

只能在 React 的函數(shù)組件中調(diào)用 Hook。不要在其他 JavaScript 函數(shù)中調(diào)用。

State Hook

useState

使用useState可以不通過class組件而在函數(shù)組件內(nèi)使用state，可通過多次調(diào)用聲明多個state

參數(shù)：

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

返回值：

當(dāng)前 state 以及更新 state 的函數(shù)。

函數(shù)式更新：

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

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

Effect Hook

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

useEffect

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

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

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

使用位置：

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

性能優(yōu)化：

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

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

示例代碼詳解 useState 與 useEffect ：

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

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

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

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

useLayoutEffect

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

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

useRef

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

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

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

自定義Hook

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

在需要共享邏輯的組件內(nèi)調(diào)用很簡單，只需要引入定義好的自定義Hook，并傳入自己想要的參數(shù)拿到你想要的返回值作用于當(dāng)前組件。

如下例：

提取自定義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鼓勵，持續(xù)更新中。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106656.html

發(fā)表評論

登陸后可評論

0條評論

cikenerd

男|高級講師

我要關(guān)注我要私信

TA的文章

2021 年最新基于 Spring Cloud 的微服務(wù)架構(gòu)分析

閱讀 2458·2021-11-19 09:40
『學(xué)了就忘』Linux軟件包管理 — 46、yum命令詳細(xì)介紹

閱讀 3586·2021-11-17 17:08
8個步驟教你用Python解數(shù)獨！（內(nèi)含源碼）

閱讀 3784·2021-09-10 10:50
GDE標(biāo)準(zhǔn)翻譯

閱讀 2214·2019-08-27 10:56
JAVA操作XML

閱讀 1942·2019-08-27 10:55
前端每日實戰(zhàn)：108# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個抽象的黑白交疊動畫

閱讀 2638·2019-08-26 12:14
jQuery添加插入元素--before、after、append、prepend

閱讀 994·2019-08-26 11:58
03. 該嘗嘗React Hook了。

閱讀 1494·2019-08-26 10:43

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

03. 該嘗嘗React Hook了。

useState

useEffect

如下例：

相關(guān)文章

***react與redux通信之hook***

**快速了解 React Hooks 原理**

React Hook 不完全指南

**10分鐘了解react新特性hooks**

React Hooks入門: 基礎(chǔ)

發(fā)表評論

0條評論

cikenerd

男|高級講師

TA的文章

2021 年最新基于 Spring Cloud 的微服務(wù)架構(gòu)分析

『學(xué)了就忘』Linux軟件包管理 — 46、yum命令詳細(xì)介紹

8個步驟教你用Python解數(shù)獨！（內(nèi)含源碼）

GDE標(biāo)準(zhǔn)翻譯

JAVA操作XML

前端每日實戰(zhàn)：108# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個抽象的黑白交疊動畫

jQuery添加插入元素--before、after、append、prepend

03. 該嘗嘗React Hook了。

最新活動