資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究理解 React.js 中的狀態
元件的狀態和生命週期對於使動態應用程式正常工作非常強大。
狀態
狀態通常用於有狀態元件。隨著 Hook 的引入，我們現在也可以在函式元件中新增狀態。Hook 的名稱是 useState。
狀態是一個 JavaScript 物件，可以透過使用者操作更改，併為 UI 新增動態性。使用狀態從伺服器更新資料是一種常見的用例。
狀態和屬性之間的區別 -
- 我們知道，屬性是一個 JavaScript 物件，它儲存作為屬性傳遞給元件的資訊。
- 屬性值是不可變的，不應在元件內部更改。
- 狀態是可變的，可以根據操作進行更改。
- 狀態可以在基於類的元件中作為物件建立。要在函式元件中建立狀態，我們可以使用 useState Hook。
- 狀態可以透過副作用（如伺服器呼叫和事件處理程式）進行更新。
在類中建立狀態
class Message extends React.component{
constructor(props){
super(props);
this.state = { message: ‘hello’};
}
}或
class Message extends React.component{
state = {message:’hello’};
constructor(props){
super(props);
}
}在函式元件中建立狀態
import React, { useState } from ‘react’;
function Message(){
const [message, setMessage] = useState(‘hello’);
//return statement
return (
);
}useState 提供兩個輸出：1. 變數 message 和 2. 設定方法（此處為 setMessage）。Message 初始化為字串 hello。
更新狀態
狀態不應直接更新。所有對狀態的更新都應使用 React 庫提供的 setState 方法進行。
this.setState({message:’welcome’});狀態的直接初始化僅允許在類或其建構函式中進行一次。
如果我們需要在更新任何屬性時使用先前狀態或屬性，則可以像下面這樣以非同步方式執行 -
This.setState( (prevState, props) =>(
{
message: prevState.message+’hello’
}
))
更新於： 2019年8月28日
355 次檢視
廣告