挑戰 React 第十二篇

什麼是 React state?

我們上篇有提到，可使用 props 渲染我們要的資訊，但props是唯讀的，那萬一我要在 component 裡改變資訊怎麼辦？

state 這時候就派上用場。

props Vs state

實作範例

目標

Hi Visitor 按下 button 後，訊息變成 Hi Tom

1. 在 app.js 檔案裡面加入 Hi Component

function App() {
  return (
    <div className="App">
      <Hi />
    </div>
  );
}

2. 新增一個 Hi.js 檔案，並新增以下程式碼

import React, { Component} from 'react';

class Hi extends Component {

  render() {
    return <h1>Hi Visitor</h1>
  }

export default Hi

3. yarn start 第二步驟成果
   

4. 使用 state ，通常 this.state 會寫在 constructor

class Hi extends Component {
  constructor() {
    super();
    //預設訊息為 Hi Visitor
    this.state = {
      message: "Hi Visitor"
    }
  }
  render() {
    //回傳 this.state 的預設訊息
    return <h1>{this.state.message}</h1>
  }
 
}

export default Hi  

5. yarn start 第四步驟結果

6. 新增一個 button 叫做 changeMessage ，此 function 為改變預設 state 的內容

import React, { Component} from 'react';

class Hi extends Component {
  constructor() {
    super();
    this.state = {
      message: "Hi Visitor"
    }
  }

  changeMessage() {
    this.setState({
      message: "Hi Tom"
    })
  }
  render(){
    return (
    <div>
      <h1>{this.state.message}</h1>
      // es6 arrow function 綁定此class
      <button onClick={() => this.changeMessage()}>button</button>
    </div>
    )
  }
}

export default Hi

7. yarn start 第六步驟畫面

8. 按下「 改變訊息 」按鈕，成功看到 Hi Tom

把預設的 Hi Visitor，換成 setState 的訊息

學習心得

此篇為簡單的實作，我自己在看官網的時間範本(setState現在的時間取得當前時間的組件)看得蠻吃力的，所以先寫稍微簡單的一篇講述什麼是state，還有可以看到程式碼有寫一個註解用es6綁定此class，這個之後會再拉出來一篇特別敘述。