App.js

import Header from ‘./Header’ /** 组件状态： 状态就数据，因此组件状态指的就是某一个组件自己的数据 数据驱动 DOM ： 当我们修改某一个数据的时候，界面上的DOM中数据展示也会自动更新 * 组件状态管理 */ function App() { // const obj = { // name: ‘syy’, // age: 18 // } return ( <div> <Header/> </div> ) } export default App

Header.js

import React, { Component } from ‘react’ class Header extends Component { // 在类组件当中默认就存在一个 state 属性，它是一个对象，可以用于保存当前组件的数据 // 之后还可以通过 setState 方法来修改数据的值，最后修改之后结状态会自动展示在 DOM 界面上 state = { name:‘zce’, age:40 } handler = () => { // 在 react 当中是不能够直接来修改 state 值的 // this.state.name = ‘zoe’ this.setState({ name:‘zoe’ }) } render() { return ( <> {this.state.name} {this.state.age} <button onClick={this.handler}>点击</button> </> ) } } export default Header