iT邦幫忙

2021 iThome 鐵人賽

DAY 9
2
Modern Web

React.js 30 天學習全記錄系列 第 9

[ 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() 來更新值,還有使用時要注意的各種細節。
那今天先到這邊告一個段落,也歡迎大家多多指教!
我們下篇見ʘ‿ʘ


上一篇
[ Day 08 ] 元件的資料傳遞 - Props
下一篇
[ Day 10 ] setState() 的用法
系列文
React.js 30 天學習全記錄30

尚未有邦友留言

立即登入留言