react-组件状态

倒计时组件
Tick.js

// 倒计时
import React, { Component } from 'react'

export default class Tick extends Component {
  constructor(props) {
    super(props)
    // state必须初始化且必须为对象,否则默认为undefined
    this.state = {
      left: this.props.number
    }
  }
  // 使用setState时防止react出警告调用此函数
  componentDidMount() {
    let timer = setInterval(()=> {
      // 每次调用会重新渲染,每次赋值会使用覆盖state而不是替换state
      this.setState({
        left: this.state.left - 1
      })
      if (this.state.left === 0) {
        clearInterval(timer)
      }
    }, 1000)
  }
  render() {
    return (
      <h1>倒计时: {this.state.left} </h1>
    )
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Tick from './components/Tick';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Tick number={10} />
  </React.StrictMode>
);

组件状态

组件状态: 组件可以自行维护的数据
目前组件状态近在类组件中有效
状态(state),是一个对象,本质上是类数组的一个属性

状态的改变

不要直接改变state的值,因为react无法监控state的变化

	// 不要使用类似如下代码更改state
	this.state.left = 123

必须使用this.setState({})改变状态, 此函数会触发组件的重新渲染

组件中的数据

  1. props: 该数据由组件使用者传递,不要去更改这里的数据
  2. state: 该数据由组件自身创建,用this.setState({})改变
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

合法的咸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值