react组件的状态

状态的特点:

状态能被改变，改变了之后视图会有对应的变化。

作用:

• 保存数据。

• 数据变化响应到视图（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>
		)
	}
}