React hooks 大全詳情

来源:https://www.cnblogs.com/Allen-project/archive/2023/09/19/17712607.html
-Advertisement-
Play Games

import React, { useEffect, useState } from 'react'; hook 是react 16.8的新增特性 ，他可以讓你不在編寫class的情況下shiystate以及react的特性 Hooks的出現，首先解決了以下問題： 告別了令人疑惑的生命周期 告別類組 ...


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

hook 是react 16.8的新增特性 ，他可以讓你不在編寫class的情況下shiystate以及react的特性 Hooks的出現，首先解決了以下問題：
  1. 告別了令人疑惑的生命周期
  2. 告別類組件中煩人的this
  3. 告別繁重的類組件，回歸到了熟悉的函數組件
react 整個思想上面的轉變，從“面向對象”的思想轉為“函數式編程”，所以你會突然發現會多了一些新概念 比如：純函數，副作用，柯里化，高階函數等概念  

useState 

 

 1.基礎使用

import { useState } from 'react'
function App() {
    // 參數：狀態初始值比如,傳入 0 表示該狀態的初始值為 0
    // 返回值：數組,包含兩個值：1 狀態值（state） 2 修改該狀態的函數（setState）
    const [count, setCount] = useState(0);
    //   修改count內容
    const modifyEvent = () => {
        setCount(count + 1)
    }
    return (
        <button onClick={() => modifyEvent()}>{count}</button>
    )
}
export default App

 

 2.狀態的讀取和修改執行流程與邏輯

　　讀取狀態：該方式提供的狀態，是函數內部的局部變數，可以在函數內的任意位置使用 　　修改狀態：

　　　　1.setCount是一個函數，參數表示最新的狀態值

　　　　2.調用該函數後，將使用新值替換舊值

　　　　3.修改狀態後，由於狀態發生變化，會引起試圖變化 註意

　　事項：修改狀態的時候，一定要使用新的狀態替換舊的狀態，不能直接修改舊的狀態，尤其是引用類型

 

3. 組件的更新過程

　　函數組件使用 useState hook 後的執行過程，以及狀態值的變化

　　1.組件第一次渲染

  • 從頭開始執行該組件中的代碼邏輯
  • 調用 useState(0) 將傳入的參數作為狀態初始值，即：0
  • 渲染組件，此時，獲取到的狀態 count 值為： 0

　　2.組件第二次渲染

  • 點擊按鈕，調用 setCount(count + 1) 修改狀態，因為狀態發生改變，所以，該組件會重新渲染
  • 組件重新渲染時，會再次執行該組件中的代碼邏輯
  • 再次調用 useState(0) ，此時 React 內部會拿到最新的狀態值而非初始值，比如，該案例中最新的狀態值為 1
  • 再次渲染組件，此時，獲取到的狀態 count 值為：1
註：useState 的初始值(參數)只會在組件第一次渲染時生效。也就是說，以後的每次渲染，useState 獲取到都是最新的狀態值，React 組件會記住每次最新的狀態值  
import { useState } from 'react'
 
function App() {
  const [count, setCount] = useState(0)
  // 在這裡可以進行列印
  console.log(count,'渲染了')
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

 4.使用規則

　　1.useState 函數可以執行多次，每次執行互相獨立，每調用一次為函數組件提供一個狀態 
function List(){
  // 以字元串為初始值
  const [name, setName] = useState('cp')
  // 以數組為初始值
  const [list,setList] = useState([])
}

　　2.useState 註意事項

  • 只能出現在函數組件或者其他hook函數中
  • 能嵌套在if/for/其它函數中（react按照hooks的調用順序識別每一個hook）

 

useEffect

1.理解函數副作用

 　　副作用是相對於主作用來說的，一個函數除了主作用，其他的作用就是副作用。對於 React 組件來說，主作用就是根據數據（state/props）渲染 UI，除此之外都是副作用（比如，手動修改 DOM） 　　常見的副作用：
  • 數據請求 ajax發送
  • 手動修改dom
  • localstorage操作
　　useEffect函數的作用就是為react函數組件提供副作用處理的數據和邏輯，從而修改UI和用戶交互等一種方式。  

2. 基礎使用

下麵案例說明，函數組件儲存了當前state所有狀態，函數初次就會觸發他們兩個的載入，另外當某一個發生改變了 useEffect和函數都會被重新執行載入

import { useEffect, useState } from 'react'
 
function App() {
  const [count, setCount] = useState(0)
 
  useEffect(()=>{
    // 修改了dom數據後 userffect函數被副作用重新執行
    console.log('執行了副作用函數')
  });
    // 函數組件也會被重新執行   
  console.log('函數組件被重新執行了')
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
 
export default App

 

3.useEffect依賴項和控制執行的時機

由於 組件首次渲染執行一次，以及不管是哪個狀態更改引起組件更新時都會重新執行   添加空數組依賴 
import { useEffect, useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  useEffect(()=>{
    // 修改了dom數據後 userffect函數不會在被觸發，只有首次載入函數才會執行一次
    console.log('執行了副作用函數')
  },[]);
    //修改了dom數據後 函數組件會被重新執行   
  console.log('函數組件被重新執行了')
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

添加特定項作為依賴

副作用函數在首次渲染時執行，在依賴項發生變化時重新執行

給useEffect添加特定的依賴項，當這個依賴性的state發生改變，useEffect與函數組件都會重新渲染被執行，由於第二個參數是依賴項所以是數組可以添加多個依賴項

沒有useEffect添加的特定的依賴項，就不會觸發useEffect函數，只會觸發組件的渲染函數

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 
    
    useEffect(() => {    
        console.log('副作用執行了')  
    }, [count])  
    console.log('組件被執行了')
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

清理副作用

  
function App() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState('zs')

    useEffect(() => {
        console.log('副作用執行了')
        return () => {
            alert(1)
            console.log('執行了清楚副作用，組件卸載的時候執行')
        }
    }, [count])
    console.log('組件被執行了')
    return (
        <>
            <button onClick={() => { setCount(count + 1) }}>{count}</button>
            <button onClick={() => { setName('cp') }}>{name}</button>
        </>
    )
}

 

另外一般一個 useEffect 只用來處理一個功能，有多個功能時，建議使用多個 useEffect  

useMemo(性能優化)

解決函數組件的性能問題，比如子組件重覆執行問題，每次渲染都進行高開銷的計算

// 子組件
function Sub(props) {
    console.log("Sub render");
    let { number, onClick } = props
    return (
        <button onClick={onClick}>{number}</button>
    )
}
// 父組件
function Test() {
    let [value, setValue] = useState('')
    let [number, setNumber] = useState(0)
    const addClick = () => setNumber(number + 1)
    return <>
        <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
        <Sub number={number} onClick={addClick} />
    </>
}

export default Test;

子組件依賴的只有number ，理想情況下只希望number變化時觸發子組件重新渲染

但實際是在輸入框內的值發生變化，子組件也會重新渲染 如果子組件的邏輯較複雜，就是無意義的大量計算，浪費資源

// 子組件
function Sub(props) {
    console.log("Sub render");
    let { number, onClick } = props
    return (
        <button onClick={onClick}>{number}</button>
    )
}
// 父組件
function Test() {
    let [value, setValue] = useState('')
    let [number, setNumber] = useState(0)
    const addClick = () => setNumber(number + 1);
    // 使用useMemo記住計算後的值，只有當依賴number變數發生變化，才會重新計運算元組件內容
    const MemoSub = useMemo(
        () => <Sub data={number} onClick={addClick} />,
        [number] // 只有 number 變化才重新計算 MenoSub
      )
    return <>
        <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
        {MemoSub}
    </>
}

export default Test;

 

useCallback(性能優化)

接收兩個參數：回調函數和依賴項數組。回調函數是需要緩存的函數，依賴項數組用於確定何時需要重新創建函數實例。

當依賴項數組中的任何一個值發生變化時，useCallback 將返回一個新的函數實例，否則它將返回之前緩存的函數實例

import { useState, useCallback } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // 使用 useCallback 緩存 handleClick 函數
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* 在按鈕上使用緩存的 handleClick 函數 */}
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在這個例子中，我們使用 useCallback 來緩存回調函數 handleClick， 將其緩存以避免在每次重新渲染組件時創建新的函數實例。

同時，在按鈕上使用了緩存的 handleClick 函數，以確保點擊按鈕時調用的是緩存的函數實例。我們還將 count 添加到依賴項數組中，以確保每當 count 發生變化時，handleClick 都會被重新創建。

useCallback 和 useMomeo 的區別

1.useCallback 和 useMemo 都是用於性能優化的 React 鉤子函數，它們都可以避免不必要的重新計算或重新渲染。雖然它們看起來很相似，但它們有幾個重要的區別。

2.首先，useCallback 返回一個緩存的回調函數，而 useMemo 返回一個緩存的值。這意味著 useCallback 的主要作用是為一個函數創建緩存，而 useMemo 的主要作用是緩存一個值

3.最後，它們的使用場景也不同。useCallback 適用於優化回調函數，避免不必要的重新渲染，並傳遞給子組件。而 useMemo 適用於優化計算開銷較大的值，如大型數組或對象的計算

 

useRef

useRef 可以緩存所有數據類型，更新的數據不會隨著組件的重新渲染而重置，會一直保持最新狀態的內容，

但是保存的數據類型 無法在ui渲染頁面上使用，只能作為一個狀態進行儲存

也可以綁定給一個元素標簽獲取dom進行操作

function Test() {
    /* 保存 DOM */
    const inputEl = useRef()
    const onClick = () => {
        console.log(inputEl); // 對象類型，只有一個 current 屬性指向指定DOM
        inputEl.current.innerHTML = '2asdasd sd阿薩德'
    }

    return <div>
        <div ref={inputEl}></div>
        <button onClick={onClick}>click me！！！</button>
        <br />
    </div>
}

 

useContext

 

 

 

 

 

 

 

 

 

 

 

 

         
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL的欄位數量以及長度限制
    一、InnoDB行格式 行格式 緊湊的存儲特性 增強的可變長度列存儲 大型索引鍵首碼支持 壓縮支持 支持的表空間類型 REDUNDANT N N N N system, file-per-table, general COMPACT Y N N N system, file-per-table, g ...
  • 圖文結合丨GreatSQL MGR + ProxySQL集群搭建方案
    前言 ProxySQL ProxySQL 是基於 MySQL 的一款開源的中間件的產品，是一個靈活的 MySQL 代理層，可以實現讀寫分離，支持 Query 路由功能，支持動態指定某個 SQL 進行緩存，支持動態載入（無需重啟 ProxySQL 服務），故障切換和一些 SQL 的過濾功能。 Grea ...
  • MySQL常規優化操作
    查詢SQL語句執行頻率 查詢 mysql 服務啟動時長 SHOW STATUS LIKE 'uptime'; 下列輸出表示服務啟動了276324秒 + + + | Variable_name | Value | + + + | Uptime | 276324 | + + + 查詢全局SQL執行的頻率 ...
  • MySQL高級11-後臺進程
    一、前言 MySQL的服務實現通過後臺多個線程、記憶體池、文件交互來實現對外服務的，不同線程實現不同的資源操作，各個線程相互協助，共同來完成資料庫的服務。MySQL常用的後臺線程概括如下，分為Master Thread，IO Thread，Purge Thread，Page Cleaner Threa ...
  • 分庫分表之拆分鍵設計
    眾所周知，在現實世界中，每一個資源都有其提供能力的最大上限，當單一資源達到最大上限後就得讓多個資源同時提供其能力來滿足使用方的需求。同理，在電腦世界中，單一資料庫資源不能滿足使用需求時，我們也會考慮使用多個資料庫同時提供服務來滿足需求。當使用了多個資料庫來提供服務時，最為關鍵的點是如何讓每一個數據 ...
  • 1-JavaScript 點擊事件
    web前端JavaScript交互 點擊事件 意義： JavaScript中的點擊事件是指當用戶在頁面上點擊某個元素時觸發的事件。這個事件可以用於執行各種操作，如改變元素的樣式、修改頁面內容等。這是Web應用程式中最常用 的交互方式之一，允許用戶與網頁進行交互，提高用戶體驗。 案例： 隨機點名器 知 ...
  • 時間格式化以及指定時區(time&&timezone)
    工作中經常遇到按照指定格式的時間進行展示。可參考以下腳本邏輯滿足需求 Date.prototype.PtTimeByFormat = function (fmt){ var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 ...
  • 記錄--不要再濫用可選鏈運算符(?.)啦！
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 可選鏈運算符(?.)，大家都很熟悉了，直接看個例子： const result = obj?.a?.b?.c?.d 很簡單例子，上面代碼?前面的屬性如果是空值（null或undefined），則result值是undefined，反 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類