State是组件实例对象的状态，不是组件类本身，而是这个类创建的实例。本文主要介绍React对状态的理解。有需要的朋友可以参考一下。

如何定义复杂组件(类组件)和简单组件(功能组件)？

有国家吗？

引出问题，什么是状态？

比如今天的考试，我考砸了，因为我状态不好。是状态影响了我的行为。

组件中的状态，驱动更新页面。换句话说，组件的状态存储数据，数据的变化驱动页面更新。

这里，要明白，国家是谁的国家？State是组件实例对象的状态，不是组件类本身，而是这个类创建的实例。

（class)组件实例上三大属性之一：state

显示内容

实现一个需求，通过点击页面，在热与凉之间切换。

！文档类型html

html lang='en '

头

meta charset='UTF-8' /

meta http-equiv=' X-UA-Compatible ' content=' IE=edge '/

meta name=' viewport ' content=' width=device-width，initial-scale=1.0' /

title react/标题

/头

身体

div id='test'/div

！-介绍核心库-

脚本src='./js/react . development . js '/script

！-扩展库-

脚本src='./js/react-DOM . development . js '/脚本

！-将jsx转换为js -

脚本src='./js/babel.min.js'/script

脚本类型='text/babel '

//1.创建一个组件

班级天气延伸反应。组件{

/**

*构造函数中可以接收的数据取决于新数据时传输的数据。

*新气象不是我们操作的，而是react操作的。

*/

施工员(道具){

//还没学过道具，但是需要。模仿官网的写法。

//类本身的语法

超级(道具)；

//构造函数中的this指向构造函数实例对象

//16.8之前，状态为{}，16.8之后，为null。

this.state={

isHot:没错，

};

}

render() {

console.log('this:'，this)；

返回h1今天很热/h1；

}

}

//2.将组件呈现到页面

ReactDOM.render(Weather /，document . getelementbyid(' test ')；

/脚本

/body

/html

初始化数据

！文档类型html

html lang='en '

头

meta charset='UTF-8' /

meta http-equiv=' X-UA-Compatible ' content=' IE=edge '/

meta name=' viewport ' content=' width=device-width，initial-scale=1.0' /

title react/标题

/头

身体

div id='test'/div

！-介绍核心库-

脚本src='./js/react . development . js '/script

！-扩展库-

脚本src='./js/react-DOM . development . js '/脚本

！-将jsx转换为js -

脚本src='./js/babel.min.js'/script

脚本类型='text/babel '

//1.创建一个组件

班级天气延伸反应。组件{

/**

*构造函数中可以接收的数据取决于新数据时传输的数据。

*新气象不是我们操作的，而是react操作的。

*/

施工员(道具){

//我还没学过道具，但是必须要用。模仿官网的写法，不然我执行不了。

//类本身的语法

超级(道具)；

//构造函数中的this指向构造函数实例对象

//16.8之前，状态为{}，16.8之后，为null。

this.state={

isHot:没错，

};

}

//状态在Weather的实例对象上

render() {

console.log('this:'，this)；

返回h1今天的天气很{this.state.isHot？hot ':' cool ' }/h1；

}

}

//2.将组件呈现到页面

ReactDOM.render(Weather /，document . getelementbyid(' test ')；

/脚本

/body

/html

接下来写click事件，注意，先做个错误演示。

脚本类型='text/babel '

//1.创建一个组件

班级天气延伸反应。组件{

/**

*构造函数中可以接收的数据取决于新数据时传输的数据。

*新气象不是我们操作的，而是react操作的。

*/

施工员(道具){

//还没学过道具，但是需要。模仿官网的写法。

//类本身的语法

超级(道具)；

//构造函数中的this指向构造函数实例对象

//16.8之前，状态为{}，16.8之后，为null。

this.state={

isHot:没错，

};

}

//状态在Weather的实例对象上

render() {

console.log('this:'，this)；

返回(

h1 onClick={demo()}

天气很冷。热':'冷' }

/h1

);

}

}

函数演示(){

Console.log('调用演示')；

}

//2.将组件呈现到页面

ReactDOM.render(Weather /，document . getelementbyid(' test ')；

/脚本

当我调用click事件时，我写的是onClick={demo()}。

你可以在控制台找到它，函数被立即执行了

当react处于新气象时，它通过实例调用render方法。想得到return的值，就得执行h1 onClick={demo()}今天天气很{this.state.isHot？" Hot": "cool" }/h1，执行到onClick赋值语句时，需要将demo()函数调用的返回值给onClick作为回调。demo()的返回值是undifend，也就是把undifend作为回调给onClick。* *这是错误的，因为在演示之后添加()会导致函数调用。* *单击时调用undifend，react处理这个过程。如果是undifend，就没有多余的动作。

写作中的常见错误

render() {

console.log('this:'，this)；

返回(

H1:今天的天气很热？热':'冷' }/h1

);

}

render() {

console.log('this:'，this)；

返回(

H1今天的天气很热？热':'冷' }/h1

);

}

正确的写作

!文档类型html

html lang='en '

头

meta charset='UTF-8' /

meta http-equiv=' X-UA-Compatible ' content=' IE=edge '/

meta name=' viewport ' content=' width=device-width，initial-scale=1.0' /

title react/标题

/头

身体

div id='test'/div

!-介绍核心库-

脚本src='./js/react . development . js '/script

!-扩展库-

脚本src='./js/react-DOM . development . js '/脚本

!-将jsx转换为js -

脚本src='./js/babel.min.js'/script

脚本类型='text/babel '

//1.创建一个组件

班级天气延伸反应。组件{

/**

*构造函数中可以接收的数据取决于新数据时传输的数据。

*新气象不是我们操作的，而是react操作的。

*/

施工员(道具){

//还没学过道具，但是需要。模仿官网的写法。

//类本身的语法

超级(道具)；

//构造函数中的this指向构造函数实例对象

//16.8之前，状态为{}，16.8之后，为null。

this.state={

isHot:没错，

};

}

//状态在Weather的实例对象上

render() {

console.log('this:'，this)；

返回(

h1 onClick={demo}

天气很冷。热':'冷' }

/h1

);

}

}

函数演示(){

Console.log('调用演示')；

}

//2.将组件呈现到页面

ReactDOM.render(Weather /，document . getelementbyid(' test ')；

/脚本

/body

/html

修改

数据已经渲染到上面的页面，现在想修改页面的数据。如果要修改数据，必须首先让isHot进入状态。先看一段错误写法:

函数演示(){

Console.log('调用演示')；

//错误演示

const { isHot }=this.state

console.log('isHot '，is hot)；

}

提示xxx of undefined(读' state ')，即未定义的状态。当xxx未定义时，undefined.state将报告此错误。这里的Xxx指的就是这个。

来打印一下this

函数演示(){

//错误演示

console.log('this '，this)；

const { isHot }=this.state

console.log('isHot '，is hot)；

}

看看代码结构和注释。

通过打印找到，将自定义函数放到类的外边，数据虽然能够正确显示，但并不能拿到/修改state中的数据。

班级天气延伸反应。组件{

/**

*构造函数中可以接收的数据取决于新数据时传输的数据。

*新气象不是我们操作的，而是react操作的。

*/

施工员(道具){

//还没学过道具，但是需要。模仿官网的写法。

//类本身的语法

超级(道具)；

/**

*这在构造函数中指向构造函数实例对象。

* 16.8之前，状态为{}，16.8之后，为null。

*状态是在天气的实例对象上。

*/

this.state={

isHot:没错，

};

}

//切换天气

演示(){

console.log('this '，this)；

const { isHot }=this.state

console.log('isHot '，is hot)；

}

//渲染

render() {

console.log('this:'，this)；

返回(

h1 onClick={demo}

天气很冷。热':'冷' }

/h1

);

}

}

注意，类不是函数体，不需要写function

关于React对国家的理解的简要分析，本文到此为止。更多关于React state的了解，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。