我是靠谱客的博主 壮观电灯胆,最近开发中收集的这篇文章主要介绍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({})改变

最后

以上就是壮观电灯胆为你收集整理的react-组件状态组件状态的全部内容,希望文章能够帮你解决react-组件状态组件状态所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(45)

评论列表共有 0 条评论

立即
投稿
返回
顶部