Change language
Python.Engineering Wiki 在 JavaScript 中設置狀態

在 JavaScript 中設置狀態

__del__ | __main__ Python module | array Python module | code Python module | COM PHP module | copy Python module | dis Python module | DOM PHP module | Ev PHP module | FFI PHP module | gc Python module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | operator Python module | os Python module | PS PHP module | pty Python module | Python functions | re Python module | resource Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

跟踪應用程序的狀態是單頁應用程序 (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 文檔包含額外的例子，這些例子將提供更多的實踐機會。請記住 - 您在單個頁面的應用程序中，跟踪組件的狀態對於對用戶進行更改至關重要。