react-hook特性如何使用?

2020-12-15 尚學堂前端學院

主要內容

Hook介紹使用State Hook使用 Effect Hook使用 Context Hook自定義hook使用 Reducer Hook使用 Callback Hook使用 Memo Hook使用 useRef第一節 Hook介紹

Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性

沒有破壞性改動:

完全可選的。 你無需重寫任何已有代碼就可以在一些組件中嘗試 Hook。但是如果你不想,你不必現在就去學習或使用 Hook。

100% 向後兼容的。 Hook 不包含任何破壞性改動。

現在可用。 Hook 已發布於 v16.8.0。

我們準備讓 Hook 覆蓋所有 class 組件的使用場景,但是我們將繼續為 class 組件提供支持

第二節 使用State Hook

1.語法:

說明:1.調用 useState 方法的時候做了什麼?

它定義一個 「state 變量」,這是一種在函數調用時保存變量的方式 —— useState 是一種新方法,它與 class 裡面的 this.state 提供的功能完全相同

2.useState 需要哪些參數?

useState() 方法裡面唯一的參數就是初始 state,不同於 class 的是,我們可以按照需要使用數字或字符串對其進行賦值,而不一定是對象。

3.useState 方法的返回值是什麼

返回值為:當前 state 以及更新 state 的函數

2. 讀取 State

在函數中,我們可以直接用 count

3. 更新 State

在函數中,我們已經有了 setCount 和 count 變量,所以我們不需要 this:

第三節 使用 Effect Hook

2. 使用

1. 基本使用

1.useEffect 做了什麼?

通過使用這個 Hook,你可以告訴 React 組件需要在渲染後執行某些操作。

2.為什麼在組件內部調用 useEffect?

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

3.useEffect 會在每次渲染後都執行嗎?

是的,默認情況下,它在第一次渲染之後和每次更新之後都會執行。

2. 需要清除的 effect

添加和刪除訂閱的代碼的緊密性,所以 useEffect 的設計是在同一個地方執行。如果你的 effect 返回一個函數,React 將會在執行清除操作時調用它

為什麼要在 effect 中返回一個函數?

這是 effect 可選的清除機制。每個 effect 都可以返回一個清除函數。如此可以將添加和移除訂閱的邏輯放在一起。它們都屬於 effect 的一部分。

React 何時清除 effect?

React 會在組件卸載的時候執行清除操作

3.Effect 進行性能優化

在某些情況下,每次渲染後都執行清理或者執行 effect 可能會導致性能問題。如果某些特定值在兩次重渲染之間沒有發生變化,你可以通知 React 跳過對 effect 的調用,只要傳遞數組作為 useEffect 的第二個可選參數即可

這個參數是什麼作用呢?如果 count 的值是 5,而且我們的組件重渲染的時候 count 還是等於 5,React 將對前一次渲染的 [5] 和後一次渲染的 [5] 進行比較。因為數組中的所有元素都是相等的(5 === 5),React 會跳過這個 effect,這就實現了性能的優化。

第四節 Context Hook

1. 語法

接收一個 context 對象(React.createContext 的返回值)並返回該 context 的當前值。當前的 context 值由上層組件中距離當前組件最近的 <MyContext.Provider> 的 value prop 決定

第五節:自定義hook

通過自定義 Hook,可以將組件邏輯提取到可重用的函數中

自定義 Hook 是一個函數,其名稱以 「use」 開頭,函數內部可以調用其他的 Hook。

2.定義自定義hook:

3.使用自定義hook

第六節:使用 Reducer Hook

useState 的替代方案。它接收一個形如 (state, action) => newState 的 reducer,並返回當前的 state 以及與其配套的 dispatch 方法。

第七節:使用 Callback Hook

把內聯回調函數及依賴項數組作為參數傳入 useCallback,它將返回該回調函數的 memoized 版本,該回調函數僅在某個依賴項改變時才會更新。當你把回調函數傳遞給經過優化的並使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate)的子組件時,它將非常有用。

第八節:使用useMemo

把「創建」函數和依賴項數組作為參數傳入 useMemo,它僅會在某個依賴項改變時才重新計算 memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算。

第九節:useRef

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

本文由尚學堂前端學院原創,歡迎關注,帶你一起學習Web前端知識!

相關焦點

  • react中關於hook介紹及其使用
    前言最近由於公司的項目開發,就學習了在react關於hook的使用,對其有個基本的認識以及如何在項目中去應用hook。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
  • React Hook 入門教程
    React Hook 入門教程Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。react hook 產生的原因在組件之間復用狀態邏輯很難組件之間復用狀態邏輯很困難,我們可能會把組件連結到我們的 store 裡面。
  • React 16.8 之 React Hook
    (點擊上方 前端腦洞,可快速關注,感謝分享)Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性.的人都能夠看懂那麼我們再看一下使用hook的版本import React, { useState } from 'react';function Example() {  // 聲明一個叫 "count" 的 state 變量  const [count
  • React Hook起飛指南
    業務實戰記錄:這是一個商品詳情頁用到的SKU選擇組件我們使用hook將原有的class組件進行重構,這個重構的過程就是一個狀態邏輯的抽取過程。我們將組件核心的2個狀態和相關的邏輯,抽到了2個獨立的自定義hook中(見下圖)。
  • 十一個優質React Hook庫, 收藏備用
    在搜索與React相關的內容時,很難不說「 hook」。如果你們還沒有使用它的話,應該儘快將它們加入代碼庫。它們將使您的編碼生活變得更加輕鬆和愉快。在React開發中,保持乾淨的代碼風格,可讀性,可維護性,更少的代碼行以及可重用性至關重要。本篇文章將向您介紹應立即開始使用的十一個React Hook庫。不用再拖延了,讓我們開始吧。
  • 30 分鐘精通 React 新特性——React Hooks
    你還在為搞不清使用哪個生命周期鉤子函數而日夜難眠嗎?——擁有了Hooks,生命周期鉤子函數可以先丟一邊了。你在還在為組件中的this指向而暈頭轉向嗎?——既然Class都丟掉了,哪裡還有this?你的人生第一次不再需要面對this。這樣看來,說React Hooks是今年最勁爆的新特性真的毫不誇張。
  • 30 分鐘精通 React 今年最勁爆的新特性 —— React Hooks
    你還在為搞不清使用哪個生命周期鉤子函數而日夜難眠嗎? ——擁有了Hooks,生命周期鉤子函數可以先丟一邊了。你在還在為組件中的this指向而暈頭轉向嗎? ——既然Class都丟掉了,哪裡還有this?你的人生第一次不再需要面對this。這樣看來,說React Hooks是今年最勁爆的新特性真的毫不誇張。
  • React系列二十一 - Hook(二)高級使用
    如何進行性能的優化呢?如何進行性能的優化呢?認識自定義hook自定義Hook本質上只是一種函數代碼邏輯的抽取,嚴格意義上來說,它本身並不算React的特性。使用User、Token的Context比如多個組件都需要使用User和Token的Context:這段代碼我們在每次使用user和token時都需要導入對應的Context,並且需要使用兩次useContext;
  • 手寫ReactHook核心原理,再也不怕面試官問我ReactHook原理
    當然,由於React.memo並不是react-hook的內容,所以這裡並不會取討論它是怎麼實現的。手寫useCallback useCallback的使用當我們試圖給一個子組件傳遞一個方法的時候,如下代碼所示import React ,{useState,memo}from 'react';import ReactDOM from 'react-dom';
  • React Status 中文周刊 #2 - 使用 React 編寫 CLI 工具
    從那以後它們倆都發生了很多變化,所以作者帶來了 2020 版,加入了 hook 和 Vue3 的新特性。Lea Marchand📘 教程與趣事如何使用 React 編寫一個搜索組件 — 大家都喜歡以解決常見編程問題的一手教程
  • React:useHooks小竅門
    這篇文章提供了簡單易懂的案例,幫助你去了解hooks如何使用,並且鼓勵你在接下來的項目中去使用它。但是在此之前,請確保你已經看了hook的官方文檔useEventListener如果你發現自己使用useEffect添加了許多事件監聽,那你可能需要考慮將這些邏輯封裝成一個通用的hook。
  • React Hook | 必 學 的 9 個 鉤子
    ❝Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。Hook 本質上就是一個函數,它簡潔了組件,有自己的狀態管理,生命周期管理,狀態共享。❞Hook 出現解決了什麼 ?
  • React Status 中文周刊 #21 - 2020 年 React 大事記回顧
    停止使用 `fetch` 進行 mock — 作者不僅解釋了為什麼不應在測試中使用 fetch 進行 mock,同時給出了代替方案。為什麼我在 2020 年使用 Next.js(視頻)原文連結:https://www.robinwieruch.de/react-hooks-higher-order-components📅 2020 React 每月大事記一月: Dan Abramov
  • React Hooks使用小結
    在hooks出生之前,react沒有將可復用性行為添加到組件到能力,針對這個問題廣大開發者開始使用renderProps 或者 高階組件來實現此目的。但是,說實話這些方法還是比較麻煩的,需要重新組織項目或者組件的組織結構。
  • React Status 中文周刊 #26 - Aleph:基於 Deno 的 React 框架
    新年將近,提前預祝大家新年快樂~電腦閱讀,請訪問 https://docschina.org/weekly/react🔥 本周熱門基於 AWS Lambda 的 React 應用服務端渲染 — 通過使用 Lambda 或 Lambda@Edge
  • React Status 中文周刊 #8 - 100 行代碼實現 Facebook 的 Recoil React 庫
    Mohammad Ashour如何在 React Native 中使用 Expo — 兩篇系列文章,第一篇文章作者提供一個簡單易懂的入門教程,介紹了如何安裝和配置 Expo。> — 這個 hook 不常被使用,但在本文列舉的場景下作者聲稱使用 useImperativeHandle 是最合適的。
  • 「不容錯過」手摸手帶你實現 React Hooks
    轉自手寫 React Hookshttps://juejin.im/post/6872223515580481544手寫 React Hooks Hooks 是 React 16.8 新增的特性,它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性凡是 use 開頭的 React API 都是 HooksHook
  • 不要過度使用React.useCallback()
    ]); return <MyChild onClick={handleClick} />;}「每個回調函數都應該被記住,以防止使用回調函數的子組件被無用地重新渲染」,這是他的隊友的理由。在本文中,我將解釋如何正確使用 useCallback()。1.了解函數相等性檢查在深入研究 useCallback() 用法之前,讓我們區分一下鉤子要解決的問題:函數相等性檢查。
  • React Status 中文周刊 #19 - React Hook發布兩周年回顧
    Ryan CarniatoBBC 是如何將 3100 萬 UV 的站點遷移為 React 同構應用,並提高頁面性能的? — 在第 213 期中,我們介紹了 Simorgh:BBC 也使用了 React?儘管此文並不是它的續篇,但本文也就 BBC 的發展前景及其使用 React 提高效率進行了深入研究。
  • 使用React Hooks代替類的6大理由
    我們看一下如何使用基於類的方法。handleClickEvent = () => { this.setState({count: this.state.count + 1}); }讓我們看看如何使用 hooks 實現相同的功能。