React HooK= { 簡單解釋};

useState 是一個 React Hook，它允許您透過傳回包含兩個變數的陣列來新增狀態：state、setState。當前狀態以及呼叫時成為 setter 函數的函數。它可用於追蹤應用程式中需要追蹤的資料或屬性，例如字串、數字、布林值、陣列或物件。
例：

const [state, setState] = useState();

簡單來說，狀態會在任何時候發生變化並且需要更新，因此「setState」將更新狀態，隨著時間的推移觸發組件的重新渲染。

此外，useState 可以保存任何類型的 Javascript 值，包括物件。始終記住的一點是，您永遠不應該直接更改處於 React 狀態的物件。首先，您需要建立一個新副本或建立現有副本的副本，然後將 State 設定為新副本。例如：

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

要在React 元件中使用useState，首先需要從React 匯入它，方法是在元件頁面頂部以兩種不同的方式編寫以下程式碼，兩種方式都可以完美地讓你可以選擇你的毒藥。

import React from 'react'; 
import {useState} from 'react';

或是你可以寫一行

import React, {useState} from 'react';

React Hook useState 可以在元件的頂層或自訂鉤子內調用，但不能在循環或條件內調用。

const [initialState, setInitialState] = useState();

initialState 僅在初始渲染期間使用，在後續渲染中將被忽略。
initialState 函數被傳遞給 setInitialState 函數，它以先前的狀態作為參數，並傳回一個 newState。

此外，在我看來，React 中沒有關於什麼地方可以使用 Hooks、什麼地方不可以使用 Hooks 的特殊規則。當然，您必須謹慎且有策略地保持程式碼井井有條。

在我的一個專案中，建立一個 SPA（單頁應用程式），有各種元件來實現我的目標。組織良好的秘訣是追蹤您的組件。例如，您的 App.js 元件將根據需要更新的資料類型使用 {useState}。
讓我們介紹另一個來自 React 的強大鉤子，稱為：{useEffect}，並使用它和 {useState} 來解釋這些鉤子如何對資料執行操作。以下範例來自我在最近的專案中使用的 App.js 元件。我正在處理玩具的 db.json 文件數據，這將有助於兒童第一年的發展。這是我的端點 http://localhost:4000/toys，可協助您了解 {useState} 和 {useEffect} 在應用程式元件內部的工作流程。

首先：初始化狀態：

const [toys, setToys] = useState([]);

• 這行程式碼初始化了一個狀態變數toys，並使用空數組[]作為初始值。
• setToys 是用來更新玩具狀態的函數。

第二：在組件掛載上取得資料：

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

• {useEffect} 鉤子用於在組件中執行副作用。
• {useEffect} 中的函數會在元件掛載時運行一次，因為依賴陣列 ([]) 為空。

第三：取得玩具資料：

• fetch("http://localhost:4000/toys")
  • 此行向指定 URL 發出 GET 請求以取得玩具資料。
• .then(回應=>response.json())
  • 取得請求的回應被轉換為 JSON 格式。
• .then(toysData => setToyData(toysData));
  • JSON 資料 (toysData) 用於使用 setToys 函數更新玩具狀態。

要更深入地了解 {useState, useEffect} 的工作原理，您可以訪問 React 官方網站。此外，另一個有用的來源是 w3schools 網站，這是我個人最喜歡的。它開門見山地提供了一個範例，您可以在自己的瀏覽器中嘗試。最後，如果您需要更多技術資源，mdn 網路文件將為您提供協助。

以上是React HooK= { 簡單解釋};的詳細內容。更多資訊請關注PHP中文網其他相關文章！