前端入门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>
    )
  }
}
复制代码