日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React函數式組件Hook中的useState函數的詳細解析_React

作者：小馬_xiaoen ? 更新時間： 2022-12-02 編程語言

前言

公司項目需要使用react，而函數式組件也是官方比較推薦的！！！所以學習hooks是很重要的。

一、什么是函數式組件

純函數組件有以下特點：

  • 沒有狀態
  • 沒有生命周期
  • 沒有 this

因存在如上特點，使得純函數組件只能做UI展示的功能， 涉及到狀態的管理與切換就不得不用到類組件或者redux。 但因為簡單的頁面也是用類組件，同時要繼承一個React實例，使得代碼會顯得很重。

以前我們可以使用class來聲明一個組件，其實使用function也可以定義一個組件：

創建 App1.js ：

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

備注：

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

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

在 index.js 中調用：

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

二、useState

useState讓函數組件有了state狀態，可以對狀態數據進行讀寫操作

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

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

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

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

現在我們改成函數式編程實現累加案例：

// useState就是hooks提供的一個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)}}>點擊加1</button>
        </div>
    )
}
export default App;

原文鏈接：https://blog.csdn.net/m0_46165586/article/details/127521886

欄目分類
最近更新