React 中的狀態(tài)設(shè)置，即 setState。這是一個(gè)核心概念，但它在 類組件和 函數(shù)組件（使用 Hook） 中有不同的寫法和行為。

我會(huì)分兩部分來解釋。

第一部分：類組件中的setState

在類組件中，狀態(tài)是一個(gè)叫 this.state 的對象，而更新狀態(tài)的方法是 this.setState()。

1. 基本用法

setState 用于更新組件的狀態(tài)對象，并通知 React 需要重新渲染。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment() {
    // 傳入一個(gè)新的對象來更新狀態(tài)
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.increment()}>
          Click me
        </button>
      </div>
    );
  }
}

2. 關(guān)鍵特性：異步與批處理

setState 是異步的！
當(dāng)你調(diào)用 setState 時(shí)，React 不會(huì)立即更新組件。它會(huì)將多個(gè) setState 調(diào)用合并在一起（批處理 Batched Updates），然后進(jìn)行一次更新以提高性能。

這意味著你不能在調(diào)用 setState 后立刻依賴 this.state 來獲取最新值。

// ? 錯(cuò)誤的做法
increment() {
  this.setState({ count: this.state.count + 1 });
  console.log(this.state.count); // 這里打印的仍然是舊的值，不是 +1 后的值
}

3. 如何依賴前一個(gè)狀態(tài)？使用函數(shù)形式

為了解決異步問題并確保你基于最新的狀態(tài)進(jìn)行更新，setState 可以接受一個(gè)函數(shù)作為參數(shù)，而不是一個(gè)對象。

這個(gè)函數(shù)會(huì)接收先前的狀態(tài)（prevState） 作為第一個(gè)參數(shù)。

increment() {
  this.setState((prevState) => {
    return { count: prevState.count + 1 }; // 基于之前的狀態(tài)計(jì)算新狀態(tài)
  });
}

這種形式在需要進(jìn)行多次連續(xù)狀態(tài)更新時(shí)尤其重要，因?yàn)樗鼙ＷC每次更新都基于最新且正確的前一個(gè)狀態(tài)。

4. 第二個(gè)參數(shù)：回調(diào)函數(shù)

setState 的第二個(gè)參數(shù)是一個(gè)可選的回調(diào)函數(shù)，它會(huì)在狀態(tài)更新完成并且組件重新渲染后執(zhí)行。你可以在這里執(zhí)行一些依賴于新狀態(tài) DOM 的操作。

increment() {
  this.setState(
    (prevState) => ({ count: prevState.count + 1 }),
    () => {
      console.log('狀態(tài)已更新，當(dāng)前count是：', this.state.count); // 這里可以拿到最新值
      // 可以在這里操作DOM，比如根據(jù)新的狀態(tài)設(shè)置焦點(diǎn)等
    }
  );
}

第二部分：函數(shù)組件中的setState(使用useStateHook)

在函數(shù)組件中，我們使用 useState Hook 來管理狀態(tài)。它返回一個(gè)狀態(tài)值和一個(gè)用于更新該狀態(tài)的函數(shù)（通常命名為 setXxx）。

1. 基本用法

import { useState } from 'react';

function Counter() {
  // useState 返回一個(gè)數(shù)組： [當(dāng)前狀態(tài)值, 更新狀態(tài)的函數(shù)]
  const [count, setCount] = useState(0);

  function increment() {
    // 直接傳入新的值
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

2. 同樣具有異步和批處理特性

函數(shù)組件中的 setCount 也是異步的，并且也會(huì)被 React 批量處理。你不能在調(diào)用 setCount 后立刻讀取 count 的值，因?yàn)樗€沒有被更新。

// ? 錯(cuò)誤的做法
function increment() {
  setCount(count + 1);
  console.log(count); // 仍然是舊值
}

3. 如何依賴前一個(gè)狀態(tài)？同樣使用函數(shù)形式

與類組件類似，更新函數(shù)（如 setCount）也可以接受一個(gè)函數(shù)。這個(gè)函數(shù)接收先前的狀態(tài)值作為其唯一參數(shù)。

function increment() {
  setCount((prevCount) => prevCount + 1);
}

這是推薦的做法，尤其是在事件循環(huán)中可能會(huì)多次更新同一個(gè)狀態(tài)時(shí)，它能保證你總是在最新的狀態(tài)基礎(chǔ)上進(jìn)行更新。

4. 與類組件setState的重大區(qū)別

函數(shù)組件中更新對象狀態(tài)的正確做法：
因?yàn)槟悴荒苤苯有薷臓顟B(tài)，必須創(chuàng)建一個(gè)新對象。

const [user, setUser] = useState({ name: 'Alice', age: 25 });

function updateName(newName) {
  // ? 錯(cuò)誤：直接修改原對象
  // user.name = newName;
  // setUser(user); // 不會(huì)觸發(fā)重新渲染，因?yàn)橐脹]變

  // ? 正確：展開運(yùn)算符創(chuàng)建新對象
  setUser({
    ...user,      // 拷貝所有舊屬性
    name: newName // 用新值覆蓋其中的name屬性
  });
}

總結(jié)與最佳實(shí)踐

1. 都是異步的：無論類組件還是函數(shù)組件，setState 都是異步操作，不要指望調(diào)用后能立刻拿到新值。
2. 使用函數(shù)形式更新：當(dāng)你新的狀態(tài)依賴于舊的狀態(tài)時(shí)（如計(jì)數(shù)器、列表追加等），務(wù)必使用 setXxx(prevState => newState) 的函數(shù)形式。這是最安全、最可靠的做法。
3. 理解更新差異：
   • 類組件：合并更新。
   • 函數(shù)組件：替換更新。更新對象時(shí)記得使用展開運(yùn)算符 ... 或 Object.assign() 來創(chuàng)建一個(gè)新對象。
4. 副作用操作：在類組件中，使用 setState(updater, callback) 的第二個(gè)回調(diào)參數(shù)。在函數(shù)組件中，使用 useEffect Hook 來響應(yīng)狀態(tài)的變化。useEffect(() => { ... }, [count]);

到此這篇關(guān)于React中狀態(tài)設(shè)置this.setState()的文章就介紹到這了,更多相關(guān)React 狀態(tài)設(shè)置this.setState()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論