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