在 JavaScript 中設置狀態

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

跟踪應用程序的狀態是單頁應用程序 (SAP) 記錄更改並將其報告給用戶的方式。與模板框架、視圖、控制器 (MVC) 不同,SAP 不會重定向用戶,因此需要一種方法來管理客戶端即將發生的更改。要查看 MVC 框架,請參閱此 指南。

在 React 中,組件本身可以處理自己的狀態並相應地重新生成。這是通過生命週期方法完成的,這裡將對此進行深入討論。出於本文的目的,我們將了解如何使用 setState 更改狀態。

本指南假定您對 React 有一定的基本了解。要復習或學習 React 基礎知識,本文列出了一些最好的 React 學習資源。

什麼是 React setState?

React 的 setState 方法就像穩定地改變一個組件的狀態。在 React 中更改狀態有一些特定的規則。

  1. 不能在類組件中調用 setState。類的組件調用構造函數()方法並設置為初始狀態。然後我們可以通過調用 setState 進一步改變狀態。
    React 中有兩種不同類型的組件。它是功能組件和類組件。出於我們的目的,我們只與類的組件交談。要更深入地查看這篇關於函數組件和類組件之間差異的
    文章
  2. 僅在中調用 setState類組件,我們可以使用 this 關鍵字直接引用組件本身。調用 this.setState () 是最佳做法,可確保您的代碼不會中斷。
  3. 不要直接修改狀態。 React to Spawning 不會記錄直接狀態更改。狀態更改的全部意義在於觸發對該組件的新解釋,以反映對用戶所做的更改。

現在讓我們看看這些指南上下文中的語法。

setState React 語法

從第一個指南中,您看到我們只能在類組件中使用 setState。例如,假設您有一個業務應用程序並想要實現一個購物車。我們可以設置一個名為購物車的類組件。當用戶將商品添加到購物車時,該組件將負責管理自己的狀態。

通過分解上面的代碼,我們聲明了Cart類組件像所有類組件一樣,我們擴展 react .Component。這是標準React 語法。

由於我們要向此窗格授予狀態,我們需要調用構造函數方法。因此,使用 super (props) 調用基本構造函數。您可以看到未使用任何道具調用的基本構建器。官方 React 文檔要求應該始終使用 props 調用基本構造函數方法

現在我們已經通過必要的 React 語法構建了一個類組件來維護狀態,我們準備好影響我們的初始狀態。這是唯一一次我們可以直接引用狀態。通過分配狀態調用 this.state =. {ShoppingCart: []} 允許我們將購物車的初始狀態設置為空數組 <

h2> React 示例 setState

在上一節中,我們研究了聲明初始狀態所涉及的語法。一旦在構造函數方法中設置了狀態,我們就可以照常渲染:

你的購物車

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

這裡我們有一個類組件,它的初始狀態設置為購物籃,它在渲染方法的返迴聲明中顯示購物籃。讓我們看看如何使用 setState 來更新我們的購物車。

我們定義了一個函數,該函數將向我們的購物車添加新商品,同時保留之前添加的商品。我們使用操作符 JavaScript spread (.. .) 複製初始狀態並與新狀態同步。這樣,籃子將包含所有添加的元素。

addItem 函數可以用在按鈕的 onClick React 屬性中,如果我們希望用戶能夠在a button clicks . 出於我們的目的,請參閱如何在部分函數中使用 setState 就足夠了cient。

本文旨在介紹如何使用 setState,並不詳盡。

結論

在本文中,我們有了解了什麼是 setState、如何使用它的指南、語法和一個簡短的示例。這應該是一篇文章基礎,鼓勵您深入挖掘並實踐更新組件狀態的做法

官方 React 文檔包含額外的例子,這些例子將提供更多的實踐機會。請記住 - 您在單個頁面的應用程序中,跟踪組件的狀態對於對用戶進行更改至關重要。