React?Hooks的useState、useRef使用小結(jié)

更新時(shí)間：2024年01月09日 08:33:43 作者：無妄的罪

React Hooks 是 React 16.8 版本引入的新特性，useState和useRef是兩個(gè)常用的Hooks，本文主要介紹了React?Hooks的useState、useRef使用，感興趣的可以了解一下

1. useState

useState 是一個(gè)允許你在函數(shù)組件中添加 state 的 Hook。

使用說明：

useState 返回一個(gè)狀態(tài)變量和一個(gè)設(shè)置該變量的函數(shù)。
如果傳遞給 useState 的初始值是 undefined，則返回的狀態(tài)變量初始值為 undefined。
你可以在組件的任何地方調(diào)用 useState，但通常建議在組件的頂層調(diào)用它。

代碼示例：

import React, { useState } from "react"
import { Button } from 'antd';
 
const IndexPage: React.FC = () => {
  console.log("視圖更新");
  /**
   * useState 唯一的參數(shù)就是初始 state 沒有參數(shù)時(shí)為 undefined
   * useState()會返回一個(gè)數(shù)組
   * 索引0 useState傳入的參數(shù)
   * 索引1 改變索引0的值并刷新視圖 setObj是一個(gè)方法 參數(shù)為需要改變的值
   * 我們可以按照需要使用數(shù)字或字符串對其進(jìn)行賦值，而不一定是對象
   **/
  const [obj, setObj] = useState({ count: 0 })
  const setCount = (obj: any) => {
    obj.count++
    // 當(dāng)useState創(chuàng)建一個(gè)引用類型的變量時(shí) setObj的內(nèi)存地址與obj內(nèi)存地址相同時(shí)useState不會更新視圖
    // setObj(obj) // 不會更新視圖 
    setObj({ ...obj }) // 會更新視圖
    console.log(obj);
  }
  return (
    <div>
      {obj.count}
      <br />
      <Button onClick={() => setCount(obj)}>count+1</Button>
    </div>
  );
}
 
export default IndexPage

2. useRef

useRef 是一個(gè)可以存儲任意數(shù)據(jù)類型的不可變（只讀）引用（比如一個(gè) DOM 元素或一個(gè) React 組件）。ref 是一個(gè)響應(yīng)式的引用，這意味著即使它的調(diào)用點(diǎn)沒有發(fā)生改變，它的指向也會隨著組件渲染而更新。

使用說明：

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

代碼示例：

import React, { useRef } from "react"
import { Button } from 'antd';
 
const IndexPage: React.FC = () => {
  // useRef() 有一個(gè)參數(shù)為初始值
  const ref = useRef(1)
  console.log(ref);
 
  return (
    <div ref={ref}>
    </div>
  );
}
 
export default IndexPage

到此這篇關(guān)于React Hooks的useState、useRef使用小結(jié)的文章就介紹到這了,更多相關(guān)React Hooks useState、useRef 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

一文帶你了解React中的函數(shù)組件
函數(shù)式組件的基本意義就是,組件實(shí)際上是一個(gè)函數(shù),不是類,下面這篇文章主要給大家介紹了關(guān)于React中函數(shù)組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解
這篇文章主要為大家介紹了ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
如何使用React的VideoPlayer構(gòu)建視頻播放器
本文介紹了如何使用React構(gòu)建一個(gè)基礎(chǔ)的視頻播放器組件,并探討了常見問題和易錯(cuò)點(diǎn),通過組件化思想和合理管理狀態(tài),可以實(shí)現(xiàn)功能豐富且性能優(yōu)化的視頻播放器
2025-01-01
詳解React路由傳參方法匯總記錄
這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
React組件與事件的創(chuàng)建使用教程
react事件綁定時(shí)。this并不會指向當(dāng)前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-02-02
react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果
本篇文章通過完整的代碼給大家介紹了react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-01-01
使用React hook實(shí)現(xiàn)remember me功能
相信大家在使用 React 寫頁面的時(shí)候都遇到過完成 Remember me 的需求吧！本文就將這個(gè)需求封裝在一個(gè) React hook 中以供后續(xù)的使用,覺得有用的同學(xué)可以收藏起來以備不時(shí)之需,感興趣的小伙伴跟著小編一起來看看吧
2024-04-04
React?Hooks鉤子中API的使用示例分析
在react類組件（class）寫法中，有setState和生命周期對狀態(tài)進(jìn)行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性
2022-08-08
react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-09-09
在React中實(shí)現(xiàn)子組件向父組件傳值的幾種方法
在React應(yīng)用中,組件間的通信是常見的需求,通常,父組件通過props向子組件傳遞數(shù)據(jù),但有時(shí)也需要子組件向父組件傳遞數(shù)據(jù),本文將探討如何在React中實(shí)現(xiàn)子組件向父組件傳值的幾種方法,需要的朋友可以參考下
2025-04-04