資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在React中不使用建構函式類新增有狀態元件？
我們可以使用useState hook新增有狀態元件，而無需使用建構函式類。此hook允許我們在元件中建立和更新狀態，而無需建構函式。要使用此hook，我們只需呼叫useState函式並將我們的初始狀態作為引數傳遞。
主要有兩種建立React元件的方法：
使用JS類。
使用函式式元件。
在React v16之前，無法向函式式元件新增狀態。但是，自從React Hooks問世以來，我們也可以編寫有狀態的函式式元件了。
React中的有狀態函式式元件是一個定義為JavaScript函式並使用useState hook來管理和操作其內部狀態的元件。這些元件類似於有狀態類元件，但它們不需要使用類或建構函式。useState hook用於初始化狀態，元件可以使用hook返回的值和函式來訪問和更新狀態。
有狀態函式式元件比類元件更簡單、更輕量級，並且是建立React中狀態元件的推薦方法。它們易於編寫、理解、測試和除錯。
方法
使用function關鍵字建立一個函式式元件。
function MyComponent(props) {
return <h1>Hello, {props.name}</h1>;
}
使用useState hook向元件新增狀態。useState hook接收一個初始值作為引數，並返回一個包含兩個元素的陣列：當前狀態和一個用於更新它的函式：
function MyComponent(props) {
const [count, setCount] = useState(0);
return (
<>
<h1>Hello, {props.name}</h1>
<button onClick={() => setCount(count + 1)}>Click me</button>
<p>You have clicked {count} times</p>
</>
);
}
根據需要在元件的JSX中使用狀態和更新函式：
function MyComponent(props) {
const [count, setCount] = useState(0);
return (
<>
<h1>Hello, {props.name}</h1>
<button onClick={() => setCount(count + 1)}>Click me</button>
<p>You have clicked {count} times</p>
</>
);
}
在index.js中匯入‘MyComponent.js’檔案：
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MyComponent from "./MyComponent";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<MyComponent />
</StrictMode>
);
注意 - 你可以在一個函式式元件中新增多個狀態並使用多個useState hook。
輸出
更新於：2023年2月13日
558 次檢視
廣告