快捷導(dǎo)航

React函數(shù)式組件Hook中的useState函數(shù)的詳細(xì)解析

更新時(shí)間：2022年10月27日 14:00:10 作者：小馬_xiaoen

Hook 就是 JavaScript 函數(shù)，這個(gè)函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React Hook useState函數(shù)的詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下

前言

公司項(xiàng)目需要使用react，而函數(shù)式組件也是官方比較推薦的！??！所以學(xué)習(xí)hooks是很重要的。

一、什么是函數(shù)式組件

純函數(shù)組件有以下特點(diǎn)：

沒有狀態(tài)
沒有生命周期
沒有 this

因存在如上特點(diǎn)，使得純函數(shù)組件只能做UI展示的功能，涉及到狀態(tài)的管理與切換就不得不用到類組件或者redux。但因?yàn)楹?jiǎn)單的頁面也是用類組件，同時(shí)要繼承一個(gè)React實(shí)例，使得代碼會(huì)顯得很重。

以前我們可以使用class來聲明一個(gè)組件，其實(shí)使用function也可以定義一個(gè)組件：

創(chuàng)建 App1.js ：

import React from 'react'
function App1(){
    return (
        <div>
            <h1>函數(shù)式組件</h1>
        </div>
    )
}
export default App1;

備注：

在vscode中，如果安裝過 ES7 React/Redux/GraphQL/React-Native snippets 這個(gè)插件，即可直接使用 rfc 快捷鍵敲出以下模板：

import React from 'react';
const App = () => {
    return (
        <div>
            
        </div>
    );
}
export default App;

在 index.js 中調(diào)用：

import ReactDOM from 'react-dom'
import App from './App1'
ReactDOM.render(
    <App />,
    document.getElementById('root')
)

二、useState

useState讓函數(shù)組件有了state狀態(tài)，可以對(duì)狀態(tài)數(shù)據(jù)進(jìn)行讀寫操作

語法：const [變量名,修改變量的方法名] = React.useState(初始值)

修改變量的方法名(setXxx)有兩種寫法:

setXxx(newValue):參數(shù)為非函數(shù)值，直接指定新的狀態(tài)值，內(nèi)部用器覆蓋原來的狀態(tài)值。

setXxx(value => newValue):參數(shù)為函數(shù)，接收原本的狀態(tài)值，返回新的狀態(tài)值，內(nèi)部用器覆蓋原來的狀態(tài)值。

現(xiàn)在我們改成函數(shù)式編程實(shí)現(xiàn)累加案例：

// useState就是hooks提供的一個(gè)api
import React, { useState } from 'react'
function App(){
  	// 這里useState(0)中的0，就是定義num的初始值，setNum是修改num的方法
    const [num, setNum] = useState(0);

    return (
        <div>
            <h2>{num}</h2>
            <button onClick={()=>{setNum(num+1)}}>點(diǎn)擊加1</button>
        </div>
    )
}
export default App;

到此這篇關(guān)于React函數(shù)式組件Hook中的useState函數(shù)的詳細(xì)解析的文章就介紹到這了,更多相關(guān)React Hook useState函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: