组件三大核心属性-state@6

一、理解

1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

二、强烈注意

1.组件中render方法中的this为组件实例对象

2.组件自定义的方法中this为undefined，如何解决？

问题描述

如下方代码。定义了Person的类，创建了实例对象p1：

通过p1调用类中方法时，this指向实例对象js在类的方法中，可以看出控制台中输出Person对象

当把类中的方法赋值给另一个变量，通过变量调用类方法时，属于直接调用。js类中的方法默认局部开启strict模式，此时调用时，this为undefined

javascript 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >
			class Person {
				constructor(name,age){
					this.name = name
					this.age = age
				}
				study(){
					//study方法放在了哪里？------类的原型对象上，供实例使用
					//通过Person实例调用study时，study中的this就是Person实例
					console.log(this);
				}
			}

			const p1 = new Person('tom',18)
			p1.study() //通过实例调用study方法 ,this指向实例对象
			const x = p1.study
			x()   //直接调用，局部开启了strict模式，this是undefined



		</script>
	</body>
</html>

通过以下样例可验证，js中，启用strict模式，this指向undefined，不启用strict模式，this默认指向window对象

javascript 复制代码

function  noStrict(){
                console.log(this)
            }
            function useStrict(){
                'use strict'
                console.log(this)
            }
            noStrict()
            useStrict()

问题解决

a)、强制绑定this: 通过函数对象的bind()

javascript 复制代码

 //解决changeWeather中this指向问题
            this.changeWeather = this.changeWeather.bind(this)

b)、箭头函数

javascript 复制代码

 //自定义方法------------要用赋值语句的形式+箭头函数
        changeWeather = ()=>{
            const isHot = this.state.isHot
            this.setState({isHot:!isHot})
        }

3.状态数据，不能直接修改或更新

三、state的两种写法

1、基于bind方式的写法

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建组件
    class Weather extends React.Component{

        //构造器调用几次？ ------------ 1次
        constructor(props){
            console.log('constructor');
            super(props)
            //初始化状态
            this.state = {isHot:false,wind:'微风'}
            //解决changeWeather中this指向问题
            this.changeWeather = this.changeWeather.bind(this)
        }

        //render调用几次？ ------------ 1+n次 1是初始化的那次 n是状态更新的次数
        render(){
            console.log('render');
            //读取状态
            const {isHot,wind} = this.state
            return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
        }

        //changeWeather调用几次？ ------------ 点几次调几次
        changeWeather(){
            //changeWeather放在哪里？ ------------ Weather的原型对象上，供实例使用
            //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
            //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

            console.log('changeWeather');
            //获取原来的isHot值
            const isHot = this.state.isHot
            //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
            this.setState({isHot:!isHot})
            console.log(this);

            //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
            //this.state.isHot = !isHot //这是错误的写法
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'))

</script>
</body>
</html>

2、使用箭头函数的简写方式

箭头函数没有this,当箭头函数内部存在this时，会调用外层函数的this作为自己的this

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建组件
    class Weather extends React.Component{
        //初始化状态
        state = {isHot:false,wind:'微风'}

        render(){
            const {isHot,wind} = this.state
            return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
        }

        //自定义方法------------要用赋值语句的形式+箭头函数
        changeWeather = ()=>{
            const isHot = this.state.isHot
            this.setState({isHot:!isHot})
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'))

</script>
</body>
</html>