四、【基础】组件实例三大核心属性之一 state

文章目录

1、CODE
2、Result
- 2.1、初始化
- 2.2、触发更新
3、state简写

理解：

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

注意：

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

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

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

状态数据，不能直接修改或更新，必须使用 setState

1、CODE

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>statetitle>
head>

<body>
    
    <div id="test">div>

    
    <script type="text/javascript" src="../js/react.development.js">script>
    
    <script type="text/javascript" src="../js/react-dom.development.js">script>
    
    <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: 1
                }
                //解决changeWeather中this指向问题
                this.changeWeather = this.changeWeather.bind(this)
            }

            //render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
            render() {
                console.log('render');
                //读取状态
                const { isHot, wind } = this.state
                return (
                    <div>
                        <h1>今天天气很{isHot ? '炎热' : '凉爽'}，风力{wind}级</h1>
                        <button onClick={this.changeWeather}>改变天气</button>
                        <button onClick={() => this.setState({ wind: parseInt(Math.random() * 100 || 1) })}>改变风级</button>
                    </div>
                )
            }

            //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);
            }
        }
        //2.渲染组件到页面
        ReactDOM.render(<Weather />, document.getElementById('test'))

    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

2、Result

2.1、初始化

在这里插入图片描述

2.2、触发更新

在这里插入图片描述

3、state简写

//1.创建组件
class Weather extends React.Component{
    //初始化状态
    state = {
        isHot: false,
        wind: 1
    }

    render(){
        const {isHot, wind} = this.state
        return (
            
            	今天天气很{isHot ? '炎热' : '凉爽'}，风力{wind}级
                
                
            
        )
    }

    //自定义方法————要用赋值语句的形式+箭头函数
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
}
//2.渲染组件到页面
ReactDOM.render(,document.getElementById('test'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

小白学习参考视频：尚硅谷React教程

中文官网：React 官方中文文档

相关阅读:
springboot网络安全考核平台毕业设计源码
【干货】微信小程序免费开源项目合集
创建SpringBoot项目的几种方式
如何与ChatGPT愉快地聊天
Kamailio 的 uuid_kill
[思维]The Enchanted Forest Codeforces1688D
架构设计基础设施保障IaaS之计算篇
二叉搜索树 - C++ 实现
deepstream学习笔记（三）：deepstream-imagedata-multistream解析与接入适配yolov5模型测试
VTK：2D直方图的用法与编程实例

原文地址：https://blog.csdn.net/qq_30769437/article/details/128019252