react 之 state 物件

tenor發表於2018-06-28
React物件

首先，在 react 中，通過類來構建 react 元件時，可以在類的建構函式 constructor 中可以使用 react 的屬性 state，屬性 state 是一個物件，在物件中可以定義元件需要的屬性和屬性值，比如下面的例子:

import React from "react";
import reactDom from "react-dom";
class App extends React.Component{
    constructor(){
        super();
        this.state = { num: 0 };
    }
}
複製程式碼

接下來，我們就可以在 react 元件內部的 render 方法定義虛擬 DOM 元素時使用掛載在類元件上的 state 物件。 例如：

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>{this.state.num}</p>
      </React.Fragment>
    );
  }
}
複製程式碼

再者，我們通過 React-Dom 的 render 方法將建立好的類元件渲染到頁面上，程式碼如下：

reactDom.render(<App></App>,window.root);
複製程式碼

這樣，頁面上就可以看到，在 root 節點下面已經有一個子節點 p，並且 p 節點顯示的內容為 0。

react 之 state 物件

react setState 修改元件狀態

在 react 中提供了一個 setState 方法，這個方法主要用來修改元件的狀態，呼叫這個方法後，react 將會呼叫 react-dom 中的 render 方法重新渲染頁面。

那麼，這個 setState 方法該在哪裡使用？並且如何使用呢？ 下面，我們就基於上面的例子進行擴充套件來說明 setState 該如何使用：

首先我們在需要進行渲染的虛擬 DOM 元素上增加 2 個按鈕:

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>{this.state.num}</p>
        <button onClick={this.add}>增加</button>
        <button onClick={this.remove}>刪除</button>
      </React.Fragment>
    );
  }
}
複製程式碼

接下來，我們給"增加"按鈕新增一個 add 方法，當點選這個"增加"按鈕時給 state 物件上的 num 屬性的屬性值增加 1。

  add = () => {
    // 這裡我們採用定時器的方式，不停的呼叫setState給num屬性賦值
    this.timer = setInterval(() => {
      // prevState是react自帶的，表示的是沒設定之前的狀態
      this.setState(prevState => ({ num: prevState.num + 1 }));
    },1000);
  };
複製程式碼

這時我們去頁面上點選"增加"按鈕，觸發 add 方法，num 屬性的值就不停的修改：

react 之 state 物件

現在，我們還有一個"刪除"按鈕沒有完成，這裡刪除按鈕的思路是將整個元件移除掉，讓我們一起來完成 remove 事件吧：

// 移除虛擬DOM節點,銷燬元件
remove = () => {
    // 移除指定DOM節點上的元件
    reactDom.unmountComponentAtNode(window.root);
};
複製程式碼

這時我們去頁面上點選"增加"按鈕，觸發 add 方法，然後再點選"刪除"按鈕，觸發 remove 方法，此時我們可以發現，root 的子節點全部都刪除，但是不好意思，瀏覽器 console 中出現了一個錯誤，讓我們一起來看看吧：

react 之 state 物件

很明顯，這是react給出的一個提示，說明我們的程式碼中出現的錯誤，具體的含義是：

"無法在未安裝的元件上呼叫SETStATE（或FracePoPoT）。這是一個NOP，但是它指示了應用程式中的記憶體洩漏。若要修復，請取消元件Wun卸除方法中的所有訂閱和非同步任務。"

意思是我們在呼叫remove方法的時候，已經將整個元件都從頁面上移除了，頁面上已經沒有了這個元件，但是我們的add方法是通過一個定時器不停的修改這個元件的狀態值，但是元件都已經不存在了，所以就會報這樣的一個警告，所以要解除這個警告需要在元件解除安裝之前將定時任務給清空。

因此，在這裡，我們需要用到react生命週期裡提供的一個方法：componentWillUnmount。這個方法在元件從DOM中移除時立刻被呼叫。

componentWillUnmount(){
    clearTimeout(this.timer);
}
複製程式碼

now，我們再來看看頁面上移除元件後會不會觸發警告：

react 之 state 物件

好了，關於react中的state物件先整理到這裡，歡迎大家一起交流、溝通。

相關文章