react狀態(tài)組件有2種：1、有狀態(tài)組件，是能定義state的組件，應(yīng)用于需要更改數(shù)據(jù)的地方；2、無狀態(tài)組件，是不能定義state的組件，一般應(yīng)用在本身就沒有數(shù)據(jù)更改的地方。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

React組件：有狀態(tài)組件和無狀態(tài)組件件

1、什么是組件狀態(tài)

定義：是用來描述事務(wù)在某一時刻的形態(tài)的數(shù)據(jù)。一般寫作state。

特點(diǎn)：狀態(tài)能夠被改變，改變之后視圖會發(fā)生相應(yīng)的變化

作用：(1)保存數(shù)據(jù)(2)為后續(xù)更新視圖打下基礎(chǔ)

比如，設(shè)計(jì)一個計(jì)數(shù)器，點(diǎn)擊+1按鈕后計(jì)數(shù)器的數(shù)字會變化為原數(shù)字+1

2、兩種狀態(tài)

2.1無狀態(tài)組件：不能定義state的組件，函數(shù)組件又叫無狀態(tài)組件

無狀態(tài)組件一般應(yīng)用在本身就沒有數(shù)據(jù)更改的地方，比如渲染一段商品的介紹文字，它不需要實(shí)時更新，它最大的好處時可以隨時復(fù)用

2.2有狀態(tài)組件：能定義state的組件，類數(shù)組件又叫有狀態(tài)組件

有狀態(tài)組件的應(yīng)用場景就寬泛的多了，基本上所有需要更改數(shù)據(jù)的地方都有它的身影

3.類組件狀態(tài)實(shí)例

import React from "react"; export default class Hello extends React.Component {   // 這里的state就是狀態(tài)   state = {     list: [{ id: 1, name: "明天會更好" },{ id: 2, name: "難忘今宵" }],     isLoading: true   }; }     render() { //如果當(dāng)state里的數(shù)據(jù)種類較多時可以使用解構(gòu)賦值 // 例如：const { tabs, active, list, content } = this.state     return (       <>         <h1>歌單-{this.state.count}</h1>         <ul>           {this.state.list.map((item) => (             <li key={item.id}>{item.name}</li>           ))}         </ul>         <div>{this.state.isLoading ? "正在加載" : "加載完成"}</div>       </>     );   }

【