react状态组件有哪些

青灯夜游
Freigeben: 2022-03-22 14:16:50
Original
1461 人浏览过

react状态组件有2种:1、有状态组件,是能定义state的组件,应用于需要更改数据的地方;2、无状态组件,是不能定义state的组件,一般应用在本身就没有数据更改的地方。

react状态组件有哪些

本教程操作环境: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 (
      <>
        

歌单-{this.state.count}

    {this.state.list.map((item) => (
  • {item.name}
  • ))}
{this.state.isLoading ? "正在加载" : "加载完成"}
); }
Nach dem Login kopieren

【相关推荐:Redis视频教程

以上是react状态组件有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!