一代码

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
class App extends React.Component {
 
    // constructor(){
    //     super();
    //     //初始化state
    //     this.state={
    //         count:0
    //     }
    // }
 
    //简化语法初始化state(推荐)
    state = {
        count: 0
    }
 
    render() {
        return (
            <div>
                <h1>颜值:{this.state.count}</h1>
                <button onClick={() => {
                    //箭头函数没有this,this指向上一级的this,即render
                    this.setState({
                            count: this.state.count + 1
                        }
                    )
                }}>点我长颜值</button>
            </div>
        )
    }
 
}
 
//渲染react
ReactDOM.render(<App/>, document.getElementById("root"));

二分析

可以看到该功能是这样实现的:

1 把颜值的 [值] 放在一个叫state的count的属性里

2 然后通过点击事件,改变state的count的值,即可实现该功能

那么可不可以把state这个名字改成别的呢? 如下我把它改成了coco

得到了下面这样的报错

说setCoco不是一个function

那么显然state是react内部定义好的, 我们来了解一下state

1 state是如何产生的?

react中有很多地方会用到数据，数据在react中被叫做状态
我们需要一个专门管理状态(数据)的方法,于是state就诞生了

2 state是什么?

状态(state): 即数据, 是组件内部的私有数据, 只能在组件内部使用
状态的值是一个对象

3 state的两个基本功能?

① 能够存储一定的值，从而能被react使用 → 即初始化state

② 能够在state改变的时候被react监听到并且重新渲染UI → 即获取状态、改变状态

4 state的使用?

4.1 初始化state

初始化state有两种方法

方法1

通过构造函数constructor

constructor(){
        super();
        //初始化state
        this.state={
            count:0
        }
    }

关于constructor()?

ES6引入了class类的概念，创建的每一个class类，都会有一个constructor()方法,即构造函数方法

构造函数是一种特殊的函数，主要用来初始化对象，即为成员变量赋初始值

如果一个类没有指定constructor()方法, 则会添加默认的constructor()方法

一个类只允许有一个constructor()方法

方法2(推荐)

//简化语法初始化state(推荐)
state = {
   count: 0
}

4.2 获取状态

this.state.属性

4.3 修改状态

this.setState()

作用: 修改状态,更新UI

思想: 数据驱动视图

react动态展示数据state

一 代码

二 分析