[ Day 09 ] State 是什麽？

在前面的篇幅中有提到， 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() 来更新值，还有使用时要注意的各种细节。
那今天先到这边告一个段落，也欢迎大家多多指教！
我们下篇见ʘ‿ʘ