首頁 > web前端 > js教程 > 主體

useState 並不總是正確的答案❌

WBOY
發布: 2024-07-19 15:37:20
原創
1118 人瀏覽過

在React中,我們有兩種方法來管理元件的狀態-useState 並不總是正確的答案❌和useReducer。第二種不太受歡迎,因為它適用於狀態中更複雜的對象,老實說,對於新程式設計師來說,乍看之下太棘手,但事實並非如此。

但是,useState 並不總是正確的答案❌ 看起來非常簡單易懂,因此新程式設計師經常使用它。

useState 並不總是正確的答案❌

根據使用者交互,它旨在管理重繪組件的狀態。如果你想記住某些東西而不渲染它,你可能不應該把它放在狀態中。 useRef 將是最好的選擇。

如果出現以下情況,則不需要 useState 並不總是正確的答案❌:

您希望在重新渲染期間記住一些值而不向使用者顯示它們。你的狀態中已經有數據,或者你透過props 接收到數據但需要對其進行轉換;您不需要在新的useState 並不總是正確的答案❌ 物件中保留該新值,創建一個新變數並使用它進行操作,而不會觸發無用的重新渲染。

如果出現以下情況,則需要將該值保持在某個狀態:

你想在值改變時重繪元件;最受歡迎的範例是顯示/隱藏面板、微調器、錯誤訊息和修改陣列。

從此簡化您的程式碼:
import React, { useState 並不總是正確的答案❌, useEffect } from 'react';

const MyComponent = (props) => {
  const [name, setName] = useState 並不總是正確的答案❌('name');
  const { description, index } = props;
  const [fullName, setFullName] = useState 並不總是正確的答案❌('');

  useEffect(() => {
    setFullName(`${name} - ${description}`);
  }, [name, description]);

  return (
    <div>
      <h1>{fullName}</h1>
      <input type="text" value="{name}" onchange="{(e)"> setName(e.target.value)} 
        placeholder="Enter name" 
      />
      <p>{description}</p>
    </div>
  );
};

export default MyComponent;
登入後複製

此程式碼片段定義了一個 React 元件,用於初始化 name 和 fullName 狀態,並在名稱或描述發生變更時使用 useEffect 掛鉤來更新 fullName。它還包括一個輸入字段,用於更新名稱狀態並顯示全名和描述。

這種方法會為你帶來無用的重新渲染和不必要的
使用 useEffect.當名稱或描述發生變化並且React重新渲染組件時,React將檢查是否存在依賴於這些值的功能。當名稱或描述發生變化時,useEffect將被觸發,創建新的重新渲染。

對此
import React, { useState 並不總是正確的答案❌ } from 'react';

const MyComponent = (props) => {
  const [name, setName] = useState 並不總是正確的答案❌('');
  const { description, index } = props;
  const nameWithDescription = `${name} - ${description}`;

  return (
    <div>
      <h1>{nameWithDescription}</h1>
      <input type="text" value="{name}" onchange="{(e)"> setName(e.target.value)} 
        placeholder="Enter name" 
      />
      <p>{description}</p>
    </div>
  );
};

export default MyComponent;
登入後複製

在此程式碼片段中,nameWithDescription是直接根據名稱和描述計算出來的,不需要useEffect。名稱狀態用空字串初始化。由於 React 的重新渲染機制,只要名稱或描述發生變化,nameWithDescription 就會自動更新。

我們可以使用 React 預設行為,並在名稱或描述更改時取得正確的值,而無需再次觸發重新渲染。

以上是useState 並不總是正確的答案❌的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板