es6 class类

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #react.js

setState

import React, { Component } from 'react';
import { Button } from 'antd'
export default class Person extends Component {
    constructor(props) {
        //es6
        // super: 因为子类 Preson 没有 this, super === Component类的
        // constructor ,把
        // Component this 赋值给 子类 Person
        super(props);
        // 定义 state
        this.state = {
            username: '小花',
            age: 25
        };
    }

    onClick = () => {
        // 获取old 有两种
        // setState 有异步 也有同步
        // 这个是异步
        // 第一种
        // this.setState({
        //     username: '小兰'
        // }, () => {
        //     // 第一时间获取
        //     console.log('user', this.state.username);
        // })

        // 第二种
         // 这个是异步
         this.setState(old => {
             // old 上次的值
             console.log('old', old);
             return {
                 username: '小白'
            }
         })
    }



    render() {
        const { username, age } = this.state
        return (
            <div>
                <h1>username:{username}</h1>
                <h1>age:{age}</h1>
                <Button onClick={this.onClick}>改变</Button>
            </div>
        )
    }
}