24、React 有状态组件全解析

React 有状态组件全解析

在 React 开发中，有状态组件是一个非常重要的概念，它允许组件拥有自己的数据状态，从而实现更复杂的交互和动态效果。本文将详细介绍有状态组件的各个方面，包括定义、导入、渲染、属性访问、状态数据的添加、读取、修改，以及避免常见的状态数据修改陷阱等内容。

1. 定义有状态组件

要创建一个有状态组件，需要定义一个类并继承自 React 的 Component 类。以下是一个简单的示例：

import React, { Component } from "react";
export class SimpleButton extends Component {
    render() {
        return (
            <button onClick={ this.props.callback }
                    className={ this.props.className }
                    disabled={ this.props.disabled === "true"
                        || this.props.disabled === true  }>
                { this.props.text}
            </button>
        )
    }
}

在这个示例中， SimpleButton 类继承