react的类组件和函数组件 -- 状态 state

发布时间 2023-04-29 18:03:15作者: 朱龙旭看世界
// 函数组件是无状态的 既没有数据的  类似 vue 组件中的 data 数据
// 类组件是有状态的组件 是有数据的 是双向绑定的数据 是数据驱动视图的  负责UI的视图更新 (单个组件的私有数据组件之间的数据是独立的)
import ReactDom from "react-dom"

import { Component } from "react"
// 类组件中的状态 通过 this.state.xxx 来获取状态
class Hello extends Component {
 // 提供状态
 state = {
  count: 0,
  list: [],
  isloading: true
 }

 // render 在类组件是必要的
 render () {
  return (<div>
   {
    // this是当前组件的实例对象
   }
   <h1>计数器{this.state.count}</h1>
  </div>)
 }
}

// 页面渲染
ReactDom.render(
 <>
  <Hello></Hello>
 </>,
 document.querySelector("#root")
)