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

更新時(shí)間：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ù)時(shí)為 undefined
   * useState()會返回一個數(shù)組
   * 索引0 useState傳入的參數(shù)
   * 索引1 改變索引0的值并刷新視圖 setObj是一個方法 參數(shù)為需要改變的值
   * 我們可以按照需要使用數(shù)字或字符串對其進(jìn)行賦值，而不一定是對象
   **/
  const [obj, setObj] = useState({ count: 0 })
  const setCount = (obj: any) => {
    obj.count++
    // 當(dāng)useState創(chuàng)建一個引用類型的變量時(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 是一個可以存儲任意數(shù)據(jù)類型的不可變（只讀）引用（比如一個 DOM 元素或一個 React 組件）。ref 是一個響應(yīng)式的引用，這意味著即使它的調(diào)用點(diǎn)沒有發(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: