03. 該嘗嘗React Hook了。

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

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

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可以不通過(guò)class組件而在函數(shù)組件內(nèi)使用state，可通過(guò)多次調(diào)用聲明多個(gè)state

參數(shù)：

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

返回值：

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

函數(shù)式更新：

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

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

Effect Hook

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

useEffect

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

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

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

使用位置：

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

性能優(yōu)化：

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

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

示例代碼詳解 useState 與 useEffect ：

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

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

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

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

useLayoutEffect

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

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

useRef

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

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

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

自定義Hook

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

在需要共享邏輯的組件內(nèi)調(diào)用很簡(jiǎn)單，只需要引入定義好的自定義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地址覺(jué)得有用的話，來(lái)個(gè)star鼓勵(lì)，持續(xù)更新中。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106656.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

cikenerd

男|高級(jí)講師

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

TA的文章

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

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

閱讀 3601·2021-11-17 17:08
8個(gè)步驟教你用Python解數(shù)獨(dú)?。▋?nèi)含源碼）

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

03. 該嘗嘗React Hook了。

useState

useEffect

如下例：

相關(guān)文章

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

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

React Hook 不完全指南

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

React Hooks入門: 基礎(chǔ)

發(fā)表評(píng)論

0條評(píng)論

cikenerd

男|高級(jí)講師

TA的文章

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

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

8個(gè)步驟教你用Python解數(shù)獨(dú)?。▋?nèi)含源碼）

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

JAVA操作XML

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

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