当前位置: 首页 > 資訊 >

[ Day 09 ] State 是什麼?

https://ithelp.ithome.com.tw/upload/images/20210924/20134153jSoerTSXvF.png
在前面的篇幅中有提到, React.js 是採用元件式開發並可以設定每個元件不同的狀態( State )。所以今天我們就要帶大家來看看什麼是 State ?


State 是什麼?

在 Class Component 中,用來處理元件內部的資料顯示以及更新。

簡而言之,就是指元件內部的狀態。而且 State 的管理是要使用在 Class Component 裡面的,因為在 React Hooks 還沒出現之前, Function Component 中是沒有提供 State 的。
另外, State 的值只能在該元件內部做使用。若要傳遞給其他元件的話,只能以 props 的形式傳遞給它的子元件。

讓畫面重新渲染( Re-render )

在 React.js 的 Virtual DOM - ReactDOM 當中,會有兩種導致畫面重新渲染( Re-render )的情況發生:

  1. props 的值變更時
  2. 元件的 state 更改時

所以透過上述重新渲染的概念,我們就能夠利用元件本身的 state 來控制畫面呈現出資料的最新狀態。下面我們就用官網提供的範例帶大家實作一次 state 的用法吧!


State 的實際應用

// 建立一個 Class Component
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

//將元件 Clock 渲染在 ReactDOM 中
ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
);

React.js 的官網中,他們想透過範例製作一個 Timer 讓該元件可以在固定時間更新一次。不過由於本章節只會提到 State 狀態的部分,因此關於生命週期的應用範例我們會在之後的篇幅再為大家介紹,所以部分範例就會先行跳過。

在上面的範例程式碼當中,我們先建立了一個 Class Component 後再將該元件放置在 ReactDOM 中,並且在該元件中帶入了 props 的值。
現在我們要將這個寫法改成元件內部自己的資料狀態 State 的話,可以依照下面的步驟來改寫:

1. 將 Class 的 constructor() 加入到元件中,並把原本在 props 物件內的值填入到 this.state 當中:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
}

在 Class Component <Clock> 中加入了 constructor() 來初始化我們的元件值。而且 state 本身也是一個物件結構,因此可以使用 this.state 來將變數跟其值加入到這個物件當中。

備註:如果對於 Class Component 的用法不熟悉或是不清楚為何有 constructor 這個方法的話,建議可以先回去 Day 07 再複習一下喔!

2. 將 render() 方法中 <h2> 標籤內的 this.props.date 替換成 this.state.date

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

現在我們已經將 props 的值更改成元件內部的 state ,因為 state 同樣也是物件,所以在 render 的方法中就可以將原本取自於 this.props 物件改成 this.state 了。

3. 將 ReactDOM.render() 方法中的 <Clock> 元件內的 props 移除:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

因為我們已經將來自父層的 props 物件 {date: new Date()} 加入到了元件本身的 state 當中,因此我們在 render() 方法中也不需要再加入任何屬性了。
這樣我們就完成了最基本的 State 應用囉!


控制和更新 State

在上一篇的篇幅中,有提到不管是在 Class Component 或是 Function Component 中都是不能在元件內自行修改 props 傳入的值的。那如果是元件自己的狀態 State 的話,是不是就可以進行修改了呢?

沒錯!現在我們可以透過 setState() 這個方法來更新 state 的值了!下一篇就要為大家介紹怎麼使用 setState() 來更新值,還有使用時要注意的各種細節。
那今天先到這邊告一個段落,也歡迎大家多多指教!
我們下篇見ʘ‿ʘ