web前端全系列 教程
1839个小节阅读:2244k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
State
与 props 类似,但是 state 是组件私有的,并且完全受控于所属的组件。
使用State的目的
:管理组件内部状态,并且当组件内部状态发生变化的时候,重新渲染页面。
初始化并使用state
在类的构造函数中为 state
赋初值,并且通过this.state
访问数据。
xxxxxxxxxx
import React from 'react'
export default class StateTest extends React.Component {
constructor() {
super();
this.state = {date: new Date()};
}
render() {
return <p>{ this.state.date }</p>
}
}
使用this.setState()
更新state并让页面重新渲染
xxxxxxxxxx
import React from 'react'
export default class StateTest extends React.Component {
constructor() {
super();
this.state = { date: new Date() };
}
onChange = () => {
this.setState({ date: new Date() })
}
render() {
return <div>
<p>{this.state.date.toLocaleTimeString()}</p>
<button onClick={this.onChange}>更新state</button>
</div>
}
}
提示
一般我们只在类组件里面使用
state
,函数组件当中不使用state
,所以有的时候把类组件叫做有状态组件,函数组件叫做无状态组件。
思考:State与Props的区别
State:负责组件内部的状态管理
Props:负责组件与组件之间的数据交互
实时效果反馈
1. 下列关于state描述错误的是:
A state
用于管理组件内部的数据
B state
只能在类组件中使用
C state
可以在无状态组件中使用
D 通过this.setState()
可以更改state
答案
1=>C