一、state 值到底是什麼？

記得我剛寫 React 時，我都還不太熟變數到底怎麼運用，新手們千萬不要害怕阿！寫久了就會了！如果一直沒學會的話可以看看我這篇文章。

state 值就像是你為某一個參數定義的一個初始值，你有可能在某些動作後，改變那個預設值，在改變 state值後，將會透過自動重新呼叫 render() 更新你的頁面。

然而基本上我自己將 state 認知為一個頁面的暫存值，這裡的「頁面」指的是這一個 component，也就是它可以作用的範圍。也就是說如果你的頁面架構是下圖這樣的組成方式，那你是沒有辦法在 header 拿到 component 的任何 state。

頁面組成範例圖

二、以官網首頁範例來說

下列程式碼是一個自動計算秒數並呈現的範例。在 constructor 裡的 this.state 就是在這個 component 裡可呼叫的 state 值，那它通常會是一個 object，方便後續呼叫使用。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }
/*這裡有省略的程式碼*/
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);

17.0 版本的 React 則會寫成下面這樣

class Timer extends React.Component {
  const [seconds, setSeconds] = useState(0);
/*這裡有省略的程式碼*/
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);

三、state 的使用方式

掌握下面三原則，基本上你就可以好好運用這個方便的小工具做出更多網頁上的變化啦～

1. 宣告

// 16.9 版
constructor(props) {
    this.state = { 
        seconds: 0 
    };
}

// 17.0 版
const [seconds, setSeconds] = useState(0);

2. 呼叫

// 16.9 版
    {this.state.seconds}
// 17.0 版
    seconds

3. 使用

// 16.9 版
   this.setState({
       seconds: this.state.seconds + 1
   })
   
// 17.0 版
    setSeconds(seconds + 1)

參考資源：React 官網