網頁

▼

2021/7/21

React 組件狀態 Component State

React Component的state代表Component的狀態，內容改變時Component會重新渲染(re-render)。


Component的state必須先在Class Component的建構式constructor()初始化屬性值，然後以this.state存取。例如下面在Hello component中初始化state.name，並在render()中以this.state.name取得值。

App.js

import './App.css';

function App() {
  const hello = <Hello />
  return hello
}

class Hello extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "John"} // initial state.name value
  }

  render() {
    return (<h1>Hello, {this.state.name}!</h1>)
  }
}

export default App;

state和props類似，都是Component中的JavaScript物件屬性，且異動時都會觸發重新渲染。兩者主要差別在於props是由Component外部傳入的參數，例如<Hello name="John"/>且不可從內部改變的(immutable)；而state則是在Component內部初始且可從內部改變。


下面示範當Hello.state改變時重新渲染的效果。在Component被render到DOM（又稱為mount）的生命週期方法componentDidMount()中設定setInterval()每秒定時呼叫updateName()並透過setState()更新state.name的內容。

App.js

import React from 'react'
import './App.css';

function App() {
  const hello = <Hello />
  return hello
}

class Hello extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "John"} // initial state
  }

  names = ["John", "Mary", "Tony"]
  
  getRandomName() {
    return this.names[Math.floor(Math.random() * this.names.length)]
  }

  updateName() {
    this.setState({name: this.getRandomName()})
  }

  componentDidMount() {
    setInterval(
      () => this.updateName(),
      1000
    );
  }

  render() {
    return (<h1>Hello, {this.state.name}!</h1>)
  }
}

export default App;




沒有留言:

張貼留言