首页 > 其他分享 >react的类组件和函数组件 -- 状态 state

react的类组件和函数组件 -- 状态 state

时间:2023-04-29 18:12:17浏览次数:33  
标签:状态 render -- react state 组件 数据

// 函数组件是无状态的 既没有数据的  类似 vue 组件中的 data 数据
// 类组件是有状态的组件 是有数据的 是双向绑定的数据 是数据驱动视图的  负责UI的视图更新 (单个组件的私有数据组件之间的数据是独立的)
import ReactDom from "react-dom"

import { Component } from "react"
// 类组件中的状态 通过 this.state.xxx 来获取状态
class Hello extends Component {
 // 提供状态
 state = {
  count: 0,
  list: [],
  isloading: true
 }

 // render 在类组件是必要的
 render () {
  return (<div>
   {
    // this是当前组件的实例对象
   }
   <h1>计数器{this.state.count}</h1>
  </div>)
 }
}

// 页面渲染
ReactDom.render(
 <>
  <Hello></Hello>
 </>,
 document.querySelector("#root")
)

 

标签:状态,render,--,react,state,组件,数据
From: https://www.cnblogs.com/zhulongxu/p/17364320.html

相关文章

  • [oeasy]python0143_主控程序_main
    主控程序回忆上次内容上次把apple.py拆分成了输入主函数 引用模块中变量的时候要带上包(module)名get_fruits.aget_fruits.b  最终拆分代码成功! 可以将程序再拆分成输入输出 然后再由主函......
  • 基本 操作
    进入编辑模式在打开的文件中,按下i键进入编辑模式。保存修改并退出在编辑模式下,按下Esc键回到命令模式,然后输入:wq命令保存修改并退出。放弃修改并退出在编辑模式下,按下Esc键回到命令模式,然后输入:q!命令放弃修改并退出。移动光标在命令模式下,使用箭头键......
  • C++-标准异常`<exception>`
    C++-标准异常<exception>std::exception定义于头文件<exception>classexception;https://www.apiref.com/cpp-zh/cpp/error/exception.html标准库头文件<stdexcept>https://www.apiref.com/cpp-zh/cpp/header/stdexcept.htmlstd::exceptionstd::bad_allocs......
  • 复数的比较
    一.问题描述:题目描述:建立一个复数类,实数和虚数是其私有数据成员。建立一个>(大于号)的运算符重载,比较两个复数间模的大小。输入格式:测试输入包含若干测试用例,每个测试用例占一行。每个测试用例包括四个数字,前两个数字分别表示第一个复数的实部和虚部,第三个和第四个数字分别表示第......
  • KMP算法
    KMP算法用于解决字符串匹配问题,str1某个字符串是否与str2一样,如果一样,返回str2开始的位置//KMP算法模板intn,m;chars[N],p[M];intne[M];//s[]是长文本,p[]是模式串(短串),n是s的长度,m是p的长度//读入字符串cin>>n>>s+1>>m>>p+1;//KMP算法习惯下标从1......
  • Python之路【第十六篇】:Django【基础篇】
    原博客教材链接:https://www.cnblogs.com/wupeiqi/articles/5237704.html Python的WEB框架有Django、Tornado、Flask等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM、模型绑定、模板引擎、缓存、Session等诸多功能。 1.基本配置1.1创建django程......
  • 人月神话读书笔记一
    用了将近一周的时间,终于把人月神话读完了。本想着今天把读书笔记全部发完,但是老师要求每天都要发表博客,所以我决定分三天发表。我看的是40周年中文纪念版。相比于原版增加了一些作者根据今天软件工程管理现状添加的一些新的观点与评论,看看哪些过时了,哪些依然有效。人月神话在......
  • 数组模拟实现数据结构
    数组模拟链表实现①单链表:邻接表(存储图和树)②双链表:优化某些问题单链表inte[N]存储val,intne[N]存储next//单链表模板inthead,e[N],ne[N],idx;//head表示头节点的下标,e[i]表示节点i的值,ne[i]表示节点i的指针是多少,idx存储当前已经用到了哪个点v......
  • Educational Codeforces Round 1
    A.TrickySum公式求出1到n的和,然后枚举二等整次幂。#include<bits/stdc++.h>usingnamespacestd;#defineintlonglongvoidsolve(){intn;cin>>n;intsum=(1+n)*n/2;for(inti=1;i<=n;i<<=1)sum-=i......
  • leetcode_D10_136只出现一次的数字
    1.题目 2.解一 leetcode官方解法,主要用到了两个知识:第一个是reduce函数,需要注意的是在python3中,需要通过“fromfunctoolsimportreduce”从模块中调用该函数;第二个知识是位运算中的异或运算,主要有以下计算法则。 有了这两个补充知识,该题目就很清晰了。3.解二 自......