react组件状态

一个前提:在react hook出来之前,函数式组件是没有自己的状态的,所以我们统一通过类组件来讲解

1. 初始化状态

• 通过class的实例属性state来初始化

• state的值是一个对象结构,表示一个组件可以有多个数据状态

html 复制代码
React.Component{
  // 初始化状态
  state = {
    count: 0
  }
  render() {
    return <Button>计数器</Button>
  }
}

2. 读取状态

• 通过this.state来获取状态

classCounterextendsReact.Component{

html 复制代码
  // 初始化状态
  state = {
    count: 0
   }
  render() {
    // 读取状态
    return <Button>计数器{this.state.count}</Button>
  }
}

3. 修改状态

• 语法

this.setState({ 要修改的部分数据 })

• setState方法作用

• 修改state中的数据状态

• 更新UI

• 数据驱动视图,也就是只要修改数据状态,那么页面就会自动刷新,无需手动操作dom

• 不要直接修改state中的值,必须通过setState方法进行修改

html 复制代码
React.Component{
  // 定义数据
  state = {
    count: 0,
    abled: false,
  }
  // 定义修改数据的方法
  setCount = () => {
    this.setState({
      count: this.state.count+ 1
    })
  }
  // 使用数据 并绑定事件
  render () {
    return
   		<Button onClick={this.setCount} disabled={this.state.abled}>
    		{this.state.count}
    	</Button>
  }
}
相关推荐
一点一木8 分钟前
🚀 2025 年 06 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
杨进军10 分钟前
实现 React 函数组件渲染
前端·react.js·前端框架
归于尽14 分钟前
被 50px 到 200px 的闪烁整破防了?useLayoutEffect 和 useEffect 的区别原来在这
前端·react.js
杨进军20 分钟前
实现 React Fragment 节点渲染
前端·react.js·前端框架
好困好想睡22 分钟前
认识Promise
javascript
杨进军22 分钟前
实现 React 类组件渲染
前端·react.js·前端框架
小山不高23 分钟前
react封装横向滚动组件
前端
前端_ID林23 分钟前
谈谈JavaScript的异步函数发展历程
javascript
拾光拾趣录24 分钟前
油猴插件开发学习:从零编写你的第一个浏览器增强脚本
前端·浏览器
国家不保护废物25 分钟前
深入浅出JavaScript事件循环(event loop):宏任务与微任务的奇幻之旅
前端·javascript·面试