前端入门React|前端入门React 三大属性之一 State 前端入门React三大属性之一St

理解什么是 state ?
首先我们用最通俗易懂的话来理解，比如每个人都有自己的状态，每个人的状态都会影响他的行为，
那么，我们将这句话放到 react 中去理解，把人看作是组件，组件也有自己的状态，组件的状态会影响
它的页面。
我们在游览各大网页时，会发现网页上有一些数据，如个人信息账号以及一些新闻列表等等。这些都
是数据，我们将这些数据放在了页面上，那么是什么驱动着页面的改变呢？是数据。这时候我们只需要
将数据放入状态 ( state ) 中，我们去更改状态页面也会随之变化。

首先我们用脚手架创建一个 react 项目

文章图片

启动项目进入 src / app.js 修改成如下文件

import React, { Component } from 'react'export default class App extends Component { render() { console.log(this) return (app组件) } }

打开控制台可以看见如下

文章图片

我们在 render() 方法中打印了 this 可以看见在这个组件的实例对象上面。已经有一个 state 了（这就是react 给你准备好的状态）

现在我们回到第一个问题理解什么是 state ?
1 . state 是组件对象最重要的属性，值是对象（里面可以包含多个 key : value 的组合）虽然在初始化看到的是null ，在react之前的版本中还是一个 { }
2 . 组件被称之为状态机，通过更新组件里的 state 来更新对应的页面显示（重新渲染组件）

需要注意的地方：因有函数时组件与类式组件 react 将状态放到了实例对象里函数时组件连this都没有哪儿来的状态呢？在考虑初学者未接触到 hooks
我们先从类组件来说。
初始化 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 ( 123 ) } }

我们在类中放了一个构造器 constructor ，调用了 super ( 传递的props 不在本章见做详细说明我们先写上 )

在构造器里我们改变了实例对象里面的 state 这时候我们启动项目打开控制台

文章图片

可以看见我们初始化好了一个状态 key : isHot value:true

读取状态我们将 render 方法中的代码改为如下：

render() { console.log(this.state) return ( 今天天气很{this.state.isHot ? '炎热' : '寒冷'} ) }

打开页面与控制台我们查看一下

文章图片

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 ( 今天天气很{this.state.isHot ? '炎热' : '寒冷'} ) } }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 ( 今天天气很{this.state.isHot ? '炎热' : '寒冷'} ) } }

首先我们只需要将函数从实例的外面放到实例的里面去
那么 clickTitle 这个方法放在哪儿了呢？

他放在了类的实例对象上，供实例使用

文章图片

所以我们需要在

今天天气很{this.state.isHot ? '炎热' : '寒冷'}

这句话中改成 this.clickTitle
启动项目发现标题依然是可以被点击的
接下来我们将函数内的代码改为

clickTitle() { console.log(this.state.isHot); }

这时控制台就直接报错了

文章图片

我们再去打印 this 时会发现 this 是 undefined

我们可以知道 constructor 和 render 中的 this 都是指组件的实例对象，那么自己定义的clickTitle 里的this为什么是undefined呢

文章图片

首先我们要了解到只有当 clickTitle 这个方法是组件的实例对象去调用的时候它里面的 this 才是clickTitle的实例对象
【前端入门React|前端入门React 三大属性之一 State】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 ( 今天天气很{this.state.isHot ? '炎热' : '寒冷'} ) } }

此处我们将 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 ( 今天天气很{this.state.isHot ? '炎热' : '寒冷'} ) } }