[Day 30] React 的狀態管理 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試寫 30 天文充實版面 ~~(跳過假日 ლ(́◕◞౪◟◕‵ლ) )~~ 挑戰更新文章的最後一天 !!!

本筆記將整理 React 中的狀態管理相關概念和技巧，包括 state、setState 和 useState 等。通過一邊筆記一邊學習可以更好地掌握 React 中的狀態管理方法，提高開發效率和程式碼質量。

正文 - Main text

當在 React 應用程序中需要管理狀態時，可以使用 state、setState 和 useState 來實現。

1. state 是 React 元件內部管理的一個專用對象，用於存儲元件狀態資料。當 state 資料發生變化時，React 會自動重新渲染元件。

2. setState 是用於修改元件 state 的方法，當調用 setState 時，React 會更新 state 並重新渲染元件。

3. useState 是一個 React hook，可以使開發人員在函數式元件中使用狀態。它接收一個初始值，並返回一個陣列，第一個元素是當前的狀態值，第二個元素是更新狀態的函數。

接下來將逐一搭配範例對 state、setState 和 useState 的詳細介紹。

`state`

用於存儲狀態數據的對象，通常在構造函數中初始化。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <div> { this.state.count } </div>;
  }
}

`setState`

用於更新元件狀態的方法。它接受一個對象作為參數，該對象描述了要更新的狀態。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <div> { this.state.count } </div>
        <button onClick={this.handleClick}> Click me </button>
      </div>
    );
  }
}

`useState`

是一個 React hook，可以使開發人員在函數式元件中使用狀態。useState 返回一個包含狀態和狀態更新函數的陣列。

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div> { count } </div>
      <button onClick={handleClick}> Click me </button>
    </div>
  );
}