[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

Facebook 功能: