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

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

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

1. useState

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

使用說明：

useState 返回一個狀態(tài)變量和一個設(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ù)時為 undefined
   * useState()會返回一個數(shù)組
   * 索引0 useState傳入的參數(shù)
   * 索引1 改變索引0的值并刷新視圖 setObj是一個方法 參數(shù)為需要改變的值
   * 我們可以按照需要使用數(shù)字或字符串對其進行賦值，而不一定是對象
   **/
  const [obj, setObj] = useState({ count: 0 })
  const setCount = (obj: any) => {
    obj.count++
    // 當useState創(chuàng)建一個引用類型的變量時 setObj的內(nèi)存地址與obj內(nèi)存地址相同時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 是一個可以存儲任意數(shù)據(jù)類型的不可變（只讀）引用（比如一個 DOM 元素或一個 React 組件）。ref 是一個響應(yīng)式的引用，這意味著即使它的調(diào)用點沒有發(fā)生改變，它的指向也會隨著組件渲染而更新。

使用說明：

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

代碼示例：

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