状态的特点:
状态能被改变,改变了之后视图会有对应的变化。
作用:
-
保存数据。
-
数据变化响应到视图(React 包内部的操作)。
有状态组件/无状态组件
- 有状态组件:能定义 state 的组件,类组件就是有状态组件
- 无状态组件:不能定义 state 的组件,函数组件一般叫做无状态组件
( 2019 年 02 月 06 日,React v16.8 中引入了 React Hooks,从而函数式组件也能定义自己的状态了。 )
如何定义状态?
在类组件中
方式一:在 constructor 中通过 this.state = {}
。
class App extends React.Component {
constructor() {
super()
this.state = {
list: [
{ id: 1, name: '明天会更好' },
{ id: 2, name: '今天' },
],
}
}
}
方式二:通过 state 来定义状态,state 对应的值必须是一个对象
class App extends React.Component {
state = {
list: [
{ id: 1, name: '明天会更好' },
{ id: 2, name: '今天' },
],
}
// ...
}
注意:state 对应的值必须是一个对象
如何使用状态?
// 语法:
this.state.变量名
不过在具体使用的时候一般是先解构了再使用比较方便。
具体使用代码如下:
import React, { Component } from 'react'
export default class App extends Component {
// !在constructor中定义, super必须写在前面 可以传参
// constructor() {
// super()
// this.state = {
// age: 18
// }
// }
// !直接定义 不可以传参
state = {
age: 18,
arr: [ { id: 1, name: 'VUE' }, { id: 2, name: 'React' }, { id: 3, name: 'Angular' } ]
}
// 两种状态的差异:
// 1. constructor中定义 在new的时候可以传参,传递的参数可以作为状态
// 2.state={}中定义不可以传参
// !使用
render() {
// 通过对state解构来方便使用state的数据
const { age, arr } = this.state
return (
<div>
状态的使用:
<p>年龄:{age}</p>
<p>列表:</p>
<ul>{arr.map((item) => <li key={item.id}>{item.name}</li>)}</ul>
</div>
)
}
}