概述
倒计时组件
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({})
改变状态, 此函数会触发组件的重新渲染
组件中的数据
- props: 该数据由组件使用者传递,不要去更改这里的数据
- state: 该数据由组件自身创建,用
this.setState({})
改变
最后
以上就是壮观电灯胆为你收集整理的react-组件状态组件状态的全部内容,希望文章能够帮你解决react-组件状态组件状态所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复