資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學在React.js中使用useState Hook
Hooks允許React中的函式元件獲得基於類的元件中可用的功能，使它們更強大。
我們將從React匯入useState。`import {useState} from 'react';` 這有助於我們為函式元件建立區域性狀態變數，並提供更新該變數的方法。
類中的狀態是一個物件，但使用useState，我們可以根據需要建立簡單的原始資料型別和物件。
const test=()=>{
const [age, setAge] = useState(25);
return (
<div>
<p>Age: {age}</p>
<button onClick={()=>setAge(age+1)}>Increase Age</button>
</div>
);
}在上面的示例中，我們建立了一個名為age的狀態變數，其初始值為25。useState還為我們提供了setAge方法，我們在點選按鈕時使用它將age加1。
useState為我們提供了一個包含兩個元素的陣列：1. 當前值 2. 更新該值的函式
useState返回的元素順序是固定的，這意味著第一個元素是當前值，第二個是設定函式。
同樣，我們可以建立多個狀態變數，但這些useState應該在函式體中的第一條語句。
這在React 16.8中引入，並且向後相容，這意味著我們可以將類轉換為函式元件。
useState只在元件的生命週期中初始化一次變數，並在多次渲染之間保持其值。
我們可以定義一個空陣列。
const myList= useState([]);
我們可以傳遞前一個值並在設定函式中處理它。
setAge(preAge=>preAge+1);
更新值時，請確保返回一個新物件以觸發重新渲染，否則React會將其視為相同物件，並且不會重新渲染，如下所述。
onClick={(e)=>{
age.birthYear=e.target.value;
setAge(age);
}}由於我們只是更改了當前物件，並且物件保持不變，因此它不會觸發重新渲染。
我們應該建立一個新物件。
onClick={(e)=>{
const newAge={birthYear: e.target.value};
setAge(newAge);
}}透過這種方式，React會看到新物件的建立，並且它會在值更改時重新渲染。
這種方法清楚地向我們展示了useState不會合並更新，而是用新值替換它們。而基於類的元件中的setState會自動合併它們。
為了避免物件的其它屬性丟失，我們可以使用擴充套件運算子。
setAge((prev)=>{
return {…prev, birthYear:newValue};
});擴充套件運算子將保留物件的其餘屬性，防止它們丟失，並更新其他屬性。
請注意，所有這些hook只在函式元件中有效，在基於類的元件中無效。這些hook在非React JavaScript函式中也不起作用。
這些hook不應該在條件語句或迴圈中使用，而應該在函式體的開頭以簡單的語句宣告。
如果您有更多興趣，分析React庫中`ReactFiberHooks`類的程式碼可能會有所幫助，在那裡我們可以看到hook的實現。
為區域性狀態變數提供初始值不是必需的。更新以非同步方式工作，不會阻止UI渲染。
這可能是新的現代React程式碼的編寫方式，而不是編寫類。
512 次瀏覽
