[React Js] React 入門 ：組件 ( Component ) 的 狀態 ( state ) 與 setState()

組件(component) 的 狀態(state)，為 React 組件(component) 中可以自己自訂的一個物件。

當 state 這個物件有變化時，React 就會自動 重新 渲染，當前的 React Element

簡單來說當 React 偵測 到 state 的這個物件的資料有變化時，就會自動在前端上，重新 繪製 當前的物件，達到 更新 畫面的效果

下面我們實際使用編碼來進行說明：

下面以簡單的 計時器 功能來實際說明

建立 state 物件，與初始化

class MyComponent extends React.Component{

 construstor(props){
  super(props);
  this.state = {time = 1} //在這邊進行 state 物件的初始化
 } // 注意這邊

}

在自訂 建構式(construtor) 這邊的 參數 要 帶入 props ， 這個是 React 的規定， props 中包含著 React 內需要的參數

相關文章請參閱： React construtor

接著我們先建置一下基本的 React Element ， 如下：

window.addEventListener('load',()=>{
  ReactDOM.render(
    React.createElement(MyComponent),
    document.body
  )
})

class MyComponent extends React.Component{

 construstor(props){
  super(props);
  this.state = {time = 1}
 }

 render(){
  return React.createElement('h1',null,this.state.time) //注意
 }

}

上述的編碼如過你有看過我之前幾篇的文章，是不難理解的：

[React Js] React 入門：安裝 與 渲染 HTML 元素
[React Js] React 入門 ：建立 組件 ( Component )
[React Js] React 入門 ：組件 ( Component ) 的 巢狀結構
[React Js] React 入門 ：組件 ( Component ) 的 屬性 ( props )

這邊唯一需要注意的地方是如果我們要取得 state 裡的物件了話，我們只要使用 this.state 就可以了

更新狀態 setState()

再來就是重頭戲了，我們使用 setState() 的方法，來進行 state 內的資料內容，如下：

window.addEventListener('load',()=>{
  ReactDOM.render(
    React.createElement(MyComponent),
    document.body
  )
})

class MyComponent extends React.Component{

  constructor(props){
    super(props);
    this.state = {'time':1};
  }

  componentWillMount(){
    window.setInterval(()=>{
      this.setState((currentState,currentProps)=>{
        return {'time': currentState.content += 1}
      })
    },1000)
  } // 注意這邊

  render(){
    return React.createElement('h1' ,null,this.state.time)
  }

}

我們在 React 的生命週期中的 componentWillMount()，使用 window.setInterval() 的方法來建立排程，讓其可以在 每一秒 時，使用 setState() 的方法來 更新 state 裡的資料

componentWillMount() 在 React Elemnt 正要 render() 之前 的 action

藉由 setState() 的方法，更新了 state 的物件，並直接重新 render() 我們要最更新的畫面與 React Elemnt

setState()

setState((prevState, props) => { return {new state object} })

prevState

• 當前的 狀態 (state) 的物件

props

• 當前的 屬性 (props) 的物件

React 官方文件：setstate