前端入門React 三大屬性之一 State

理解什麼是 state ?

首先咱們用最通俗易懂的話來理解，好比每一個人都有本身的狀態，每一個人的狀態都會影響他的行爲，react

那麼，咱們將這句話放到 react 中去理解，把人看做是組件，組件也有本身的狀態，組件的狀態會影響api

它的頁面。markdown

咱們在遊覽各大網頁時，會發現網頁上有一些數據，如我的信息帳號以及一些新聞列表等等。這些都app

是數據，咱們將這些數據放在了頁面上，那麼是什麼驅動着頁面的改變呢？是數據。這時候咱們只須要函數

將數據放入狀態 ( state ) 中，咱們去更改狀態頁面也會隨之變化。this

首先咱們用腳手架建立一個 react 項目

啓動項目進入 src / app.js 修改爲以下文件

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    console.log(this)
    return (
      <div>
        app組件
      </div>
    )
  }
}
複製代碼

打開控制檯能夠看見以下

咱們在 render() 方法中打印了 this 能夠看見在這個組件的實例對象上面。已經有一個 state 了（這就是react 給你準備好的狀態）

如今咱們回到第一個問題理解什麼是 state ?spa

1 . state 是組件對象最重要的屬性，值是對象（裏面能夠包含多個 key : value 的組合）雖然在初始化看到的是null ，在react以前的版本中仍是一個 { }3d

2 . 組件被稱之爲狀態機，經過更新組件裏的 state 來更新對應的頁面顯示（從新渲染組件）code

須要注意的地方：因有函數時組件與類式組件 react 將狀態放到了實例對象裏函數時組件連this都沒有哪兒來的狀態呢？在考慮初學者未接觸到 hooksorm

咱們先從類組件來講。

初始化 state

首先咱們新建一個組件以下：

import React, { Component } from 'react'

export default class App extends Component {

  constructor(props) {
    super(props)
    // 初始化狀態
    this.state = {
      isHot: true
    }
  }

  render() {
    console.log(this)
    return (
      <div>123</div>
    )
  }
}
複製代碼

咱們在類中放了一個構造器 constructor ，調用了 super ( 傳遞的props 不在本章見作詳細說明咱們先寫上 )

在構造器裏咱們改變了實例對象裏面的 state 這時候咱們啓動項目打開控制檯

能夠看見咱們初始化好了一個狀態 key : isHot value:true

讀取狀態咱們將 render 方法中的代碼改成以下：

render() {
    console.log(this.state)
    return (
      <h2>今每天氣很{this.state.isHot ? '炎熱' : '寒冷'}</h2>
    )
  }

複製代碼

打開頁面與控制檯咱們查看一下

React 中的事件綁定

須要注意的是原生js 中的 onclick , onblur ... 等等在 React 中所有改成 onClick onBlur 這種小駝峯的寫法

接下來咱們修改代碼以下

import React, { Component } from 'react'

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      isHot: true
    }
  }

  render() {
    return (
      <h2 onClick={ clickTitle() }>今每天氣很{this.state.isHot ? '炎熱' : '寒冷'}</h2>
    )
  }
}

function clickTitle() {
  console.log('標題被點擊了');
}
複製代碼

咱們打開控制檯能夠看見咱們尚未點擊，控制檯就已經打印了。

咱們能夠思考一下爲何？

onClick = { clickTitle() } 同等於 onClick = { 函數調用的返回值 }

咱們將返回值直接給到了 onClick 他就自動的去給你點了

咱們將 onClick = { clickTitle() } 後面的調用給去掉改成 onClick = { clickTitle }

從新回到頁面咱們能夠看到已經能夠進行正常的點擊操做了

類方法中的 this

此處咱們接着上一個小節中的內容繼續。

我須要點擊標題的時候讓炎熱變成寒冷這個時候怎麼去處理？咱們須要將代碼修改爲以下：

import React, { Component } from 'react'

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      isHot: true
    }
  }

  clickTitle() {
    console.log('標題被點擊了');
  }

  render() {
    return (
      <h2 onClick={ this.clickTitle }>今每天氣很{this.state.isHot ? '炎熱' : '寒冷'}</h2>
    )
  }
}
複製代碼

首先咱們只須要將函數從實例的外面放到實例的裏面去

那麼 clickTitle 這個方法放在哪兒了呢？

他放在了類的實例對象上，供實例使用

因此咱們須要在

<h2 onClick={ this.clickTitle }>今每天氣很{this.state.isHot ? '炎熱' : '寒冷'}</h2>
複製代碼

這句話中改爲 this.clickTitle

啓動項目發現標題依然是能夠被點擊的

接下來咱們將函數內的代碼改成

clickTitle() {
    console.log(this.state.isHot);
}
複製代碼

這時控制檯就直接報錯了

咱們再去打印 this 時會發現 this 是 undefined

咱們能夠知道 constructor 和 render 中的 this 都是指組件的實例對象，那麼本身定義的clickTitle 裏的this爲何是undefined呢

首先咱們要了解到只有當 clickTitle 這個方法是組件的實例對象去調用的時候它裏面的 this 纔是clickTitle的實例對象

constructor 裏的 this 必定是當前實例的實例對象是一個固定的東西

注意：咱們須要知道的是 clickTitle 在調用的時候並非App這個實例對象去調用他的

這時候再思考一個問題既然不是這個實例去調用他的那 this 爲何是 undefined 不是 window呢 ?

注意：在類中所定義的方法它會自動的去在你所定義的方法裏面開啓嚴格模式開啓嚴格模式後 this 就是 undefined 是類自動幫你開啓的

解決類中 this 的指向問題

在constructor 裏加一段代碼以下

constructor(props) {
    super(props)
    this.state = {
      isHot: true
    }
   // 解決 this 的指向問題
    this.clickTitle = this.clickTitle.bind(this)
  }
複製代碼

這個時候咱們去控制檯點擊標題查看一下

this.clickTitle = this.clickTitle.bind(this) 這一段代碼自己是一個賦值語句咱們在實例對象自己加了一個方法這個方法從那兒來的呢？是從原型上來的

React 中 setState 的使用

此處咱們接着上一個小節中的內容繼續。

咱們將函數體的內容改成以下：

clickTitle() {
    this.state.isHot = !this.state.isHot
  }
複製代碼

運行項目後發現點擊標題依然不能改變標題的內容

咱們打印函數裏的 this.state.isHot

會發現 isHot的值確實在改變可是爲何頁面不更新呢

嚴重注意： state( 狀態 ) 不可直接更改， this.state.isHot = !this.state.isHot 這一行是錯誤的寫法

此處咱們須要藉助一個內置的 api 去更改state的值 setState() 。咱們在函數體內打印 this 能夠找到

在函數體內修改以下代碼：

clickTitle() {
  this.setState({ isHot: !this.state.isHot })
}
複製代碼

這時咱們點擊頁面中的標題就能夠進行切換了

注意：修改state的值必須使用 setState 來修改，且修改是一個合併的動做並非直接替換 setState調用幾回 render 這個方法就會調用幾回能夠本身打印試試

State 的簡寫方式

將代碼改爲以下：

import React, { Component } from 'react'

export default class App extends Component {

  // constructor(props) {
  //   super(props)
  //   this.state = {
  //   }
  //   this.clickTitle = this.clickTitle.bind(this)
  // }

  state = {
    isHot: true
  }

  // clickTitle() {
  //   this.setState({ isHot: !this.state.isHot })
  // }

  clickTitle = () => {
    this.setState({ isHot: !this.state.isHot })
  }

  render() {
    return (
      <h2 onClick={this.clickTitle}>今每天氣很{this.state.isHot ? '炎熱' : '寒冷'}</h2>
    )
  }
}
複製代碼

此處咱們將 state 從 constructor 直接拿出來

在類中，咱們直接寫一個賦值的語句至關於咱們在 APP 這個實例對象上新加了一個屬性屬性的名字是 state 它的值是 { isHot:true }

而後在將 this.clickTitle = this.clickTitle.bind(this) 給註釋掉

一樣咱們在實例對象上新增了一個方法爲 clickTitle 值是一個箭頭函數這樣就解決掉了 this 的指向問題避免在 constructor 頻繁的使用bind 綁定this

將這兩行註釋掉了之後咱們徹底能夠將 constructor 這個構造器給註釋掉，由於咱們沒有在裏面寫任何的內容

如下爲完整代碼

import React, { Component } from 'react'

export default class App extends Component {
  //初始化狀態
  state = {
    isHot: true
  }
  //自定義方法 須要採用 賦值語句的形式 + 箭頭函數
  clickTitle = () => {
    this.setState({ isHot: !this.state.isHot })
  }
  //渲染
  render() {
    return (
      <h2 onClick={this.clickTitle}>今每天氣很{this.state.isHot ? '炎熱' : '寒冷'}</h2>
    )
  }
}
複製代碼