react狀態元件有哪些

react狀態元件有2種：1、有狀態元件，是能定義state的元件，套用於需要變更資料的地方；2、無狀態元件，是無法定義state的元件，一般應用在本身就沒有資料更改的地方。

本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

React元件：有狀態元件與無狀態元件件

1、什麼是元件狀態

定義：是用來描述交易在某一時刻的形態的資料。一般寫作state。

特點：狀態能夠被改變，改變之後視圖會發生對應的變化

作用：(1)保存資料(2)為後續更新視圖打下基礎

#例如，設計一個計數器，點選1按鈕後計數器的數字會改變為原數字1

#2、兩種狀態

2.1無狀態元件：無法定義state的元件，函數元件又叫無狀態元件

無狀態元件一般應用在本身就沒有資料更改的地方，例如渲染一段商品的介紹文字，它不需要即時更新，它最大的好處時可以隨時復用

2.2有狀態元件：能定義state的元件，類別數元件又叫有狀態元件

有狀態元件的應用程式場景就寬泛的多了，基本上所有需要更改資料的地方都有它的身影

3.類別元件狀態實例

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
}
 
  render() {
//如果当state里的数据种类较多时可以使用解构赋值
// 例如：const { tabs, active, list, content } = this.state
    return (
      <>
        <h1 id="歌单-this-state-count">歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

【相關推薦：Redis影片教學】

以上是react狀態元件有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！