react动态展示数据state

铃俐

已于 2022-07-14 19:46:30 修改

阅读量1.1k

点赞数

分类专栏： react 文章标签： react.js 前端

于 2022-07-14 17:55:22 首次发布

本文链接：https://blog.csdn.net/m0_45877477/article/details/125785593

版权

react 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

做一个这样的小案例:点击按钮,颜值增加

即实现动态展示数据的功能

一代码

先上代码

//导入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
思想: 数据驱动视图

三动态展示数据抽取代码

原因: JSX中掺杂了过多的js逻辑代码,显得非常混乱
需求: 将逻辑抽离到单独的方法中,保证JSX结构清晰

实现: 有3种方法

//导入react
import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {


    //简化语法初始化state(推荐)
    state = {
        count: 0
    }
    fn(){
        this.setState({
                count: this.state.count + 1
            }
        )
    }

    render() {
        return (
            <div>
                <h1>颜值:{this.state.count}</h1>
                <button onClick={() => this.fn()}>点我长颜值</button>
            </div>
        )
    }

}

//渲染react
ReactDOM.render(<App/>, document.getElementById("root"));