Javascript 狀態

| | | | | | | | |

你有沒有聽說過 React JavaScript 庫中的 State 但不知道如何使用它?狀態是指“每個對像出現在網頁上的方式”。 “這個概念很簡單——它是關於組件當前狀態的數據的集合,可以通過修改所描述的數據來改變。每當數據發生變化時,它就會再次顯示在計算機屏幕上。條件中最難的部分知道如何以及何時使用它。但不要擔心,因為本教程解釋瞭如何使用狀態。

為了給你一個快速的概述,設置你使用的初始狀態 this.state 在 JavaScript 構造函數中。要更新狀態,請使用 setState 方法。我們將在本教程中詳細討論狀態和使用狀態的方法。

什麼是React State?

React state 是一個具有一組為組件指定的屬性的對象,這有助於組件的呈現方式。具有 state 的組件稱為有狀態的。如果組件需要在不同版本之間跟踪有關它的信息,您通常會使用它。

一個示例是需要跟踪 num 的“like”按鈕組件它點擊的次數。每次按下按鈕時,這應該會重新出現在屏幕上,就像顯示更新的點贊數一樣。為此,我們必須確保類似按鈕的組件遵循信息,而不是重複我們一遍又一遍地編碼的信息。畢竟,你不想錯過這些人。

可以通過this.state訪問組件的狀態數據,並使用.setState<進行編輯/代碼>方法。狀態是私有的,因為它不能被包含狀態的組件改變

很多人將狀態與附件混淆,這是反應的另一個對象,但有重要的兩者的區別。其中之一是狀態是動態的,這意味著它包含的數據可以改變,從而影響組件的行為。另一方面,道具是不可變的,這意味著“它的狀態在構建後不能改變。”

React 狀態語法

狀態最初是在名為 constructor 的函數中定義的。狀態可能會改變,我們想向您保證有一個初始當前值。設置狀態的一般格式是:

例如,如果你正在創建一個定時器組件,你應該將開始狀態設置為this.state = {0}秒:。你知道一個定時器每秒都會改變它的狀態,但它必須開始計數在某處。您編碼的組件稱為“this”。此語句通過將組件的一個屬性(“秒”)設置為等於您選擇的值(在本例中為“0”)來更改組件的狀態

這裡是一個名為“人”的組件記錄的一個樣本。我們將在組件中的狀態對像中添加四個值,即姓名、職業、頭髮和年齡:

p>

// 基本 React 語句導入

// 我們命名為“Person”的組件,其狀態屬性在構造函數中定義:

// 定義將在屏幕上顯示什麼的渲染函數:

person

); }} ReactDOM.render(, document.getElementById(`root`));

最後一行表示代碼將遍歷您的 HTML 文檔並查找 id 為“root”的元素,並按照您在 render 中指示它執行的操作() 方法 上面。這就是為什麼您應該在 index.html 文件的文檔正文中添加以下內容:

此 HTML 標記在“root”處具有整個 ID 屬性。這是您要求組件渲染的所有內容。

您可以通過鍵入 this.state.attributeName 來引用狀態對象。這將用定義的屬性替換“attributename”。

這是一個使用我們之前定義的屬性來創建“Person”組件狀態的示例。我們將使用 {} this.state.attribute 形式來調用我們正在編寫代碼的組件的屬性值。

在這種情況下,我們將以下方法複製到我們的“person”組件中,這將是“那個”指的是這個。屏幕顯示屬於我們編寫的屬性的值。將上一個示例中“Person”組件的 render () 聲明替換為:

{this.state.name}

{{this.state.name} 就是那個.state.occupation} 就是{} this.state.age years 目前她的頭髮是 {this.state.hair}

) .. }

屏幕顯示一個標題,其值為“name”屬性,即 Tom Hiddleston。下面,這將是一段陳述,“湯姆·希德勒斯頓是一名演員,他 40 歲。”她的頭髮是黑色的。 "

.setState() 使用 this.setState() 來更新狀態對象的值。這個方法有一個參數,它將是一個新屬性及其值:{attribute: "new value" }。 方法用於執行此操作,因為 React 將在後台調用 render 方法,以便始終顯示您的新內容。

這是一個使用我們之前的“person”組件的示例。將以下代碼添加到我們在文章開頭看到的“person”代碼組件中。

  1. 添加body類中對“person”的佔用修改函數,該函數會調用.setState方法,這裡寫的屬性是佔用屬性,我們寫下我們要修改的值。提醒“person” " 工作當前所在的組件代碼
    job = () => {this.setState ({occupation "model"});} "actor".
  2. .render()主方法 a>

    多個.setState()沒有按順序處理,所以可能會出現這個更多關於這些 - 你應該注意的衝突 。這很重要,因為你的代碼已經過時了大並且有更多的行和更多的 React 編寫狀態,你必須考慮它們如何協同工作。這可能很難做到,尤其是 React 本質上是異步的,你無法預測誰在控制你的 setstate 方法

    你必須使用 state 嗎?

    答案很簡單:不,你不應該。有兩種主要類型的組件:React 組件函數式和類組件。無狀態組件是功能性組件。錯誤地,組件中沒有狀態 - 您必須自己創建它

    無狀態,但是,您的應用程序不會非常互動..即使您選擇設置state 工作,建議不要過度使用它。這是因為在組件中過度使用 state 會導致由於復雜性,很難預測可能的衝突。

    結論

    State 和 Props 是使用 React 時要牢記的兩個重要對象。狀態跟踪組件的當前狀態,因為它根據定義狀態的更新數據而改變。另一方面,配件不會改變。一個簡單的經驗法則是問“這個組件的屬性是否隨時更改?” "。如果答案是“是”,那麼您要使用狀態類別,因為 Props 是不可變的。

    在你完全沉浸在 React 之前,請確保您熟悉 JavaScript ES6,它的功能像React VERSATILE,例如方向函數、類和變量類型。此外,在最近發布的 React 中,對 React 使用了與狀態和其他功能相關的內容進行了更改,而無需編寫類,反應鉤子

    Javascript 狀態 __del__: Questions

    Javascript 狀態 __dict__: Questions

    Shop

    Best Python online courses for 2022

    $

    Best laptop for Fortnite

    $

    Best laptop for Excel

    $

    Best laptop for Solidworks

    $

    Best laptop for Roblox

    $

    Best computer for crypto mining

    $

    Best laptop for Sims 4

    $

    Best laptop for Zoom

    $499

    Latest questions

    NUMPYNUMPY

    psycopg2: insert multiple rows with one query

    12 answers

    NUMPYNUMPY

    How to convert Nonetype to int or string?

    12 answers

    NUMPYNUMPY

    How to specify multiple return types using type-hints

    12 answers

    NUMPYNUMPY

    Javascript Error: IPython is not defined in JupyterLab

    12 answers

    Wiki

    Python OpenCV | cv2.putText () method

    numpy.arctan2 () in Python

    Python | os.path.realpath () method

    Python OpenCV | cv2.circle () method

    Python OpenCV cv2.cvtColor () method

    Python - Move item to the end of the list

    time.perf_counter () function in Python

    Check if one list is a subset of another in Python

    Python os.path.join () method