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()會(huì)返回一個(gè)數(shù)組
   * 索引0 useState傳入的參數(shù)
   * 索引1 改變索引0的值并刷新視圖 setObj是一個(gè)方法 參數(shù)為需要改變的值
   * 我們可以按照需要使用數(shù)字或字符串對(duì)其進(jìn)行賦值，而不一定是對(duì)象
   **/
  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不會(huì)更新視圖
    // setObj(obj) // 不會(huì)更新視圖 
    setObj({ ...obj }) // 會(huì)更新視圖
    console.log(obj);
  }
  return (
    <div>
      {obj.count}
      <br />
      <Button onClick={() => setCount(obj)}>count+1</Button>
    </div>
  );
}
 
export default IndexPage

2. useRef

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

使用說明：

useRef 返回一個(gè)可變的 ref 對(duì)象，其 .current 屬性被初始化為傳遞的參數(shù)（或 undefined）。
.current 的值在組件的整個(gè)生命周期內(nèi)保持不變。
ref 對(duì)象在組件的整個(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: