// 函数组件是无状态的 既没有数据的  类似 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")
)

05-react的类组件和函数组件 -- 状态 state的更多相关文章

  1. React - 组件:函数组件

    目录: . 组件名字首字母一定是大写的 . 返回一个jsx . jsx依赖React,所以组件内部需要引入React . 组件传参 a. 传递. <Component list={ arrDat ...

  2. react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符

    1.回顾 module.exports = { entry: {}, output: {}, plugins: [], module: {}, resolve: {}, devServe: {} } ...

  3. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  4. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

  5. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  6. React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接和作者信息. 为了让代码更灵活,可以写更多的组件,我们把这种模 ...

  7. React Hook父组件获取子组件的数据/函数

    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...

  8. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  9. React 函数组件

    React 函数组件 1.定义方式 React 函数组件是指使用函数方法定义的组件. 定义方式:与函数的定义方式相同,需要将内容 return 出来,需要注意的是最外层只有一个标签或者使用<&g ...

  10. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

随机推荐

  1. 对比python学julia(第三章:游戏编程)--(第一节)初识游戏库(3)

    1.1.    键盘和鼠标控制 在游戏应用程序中,通常使用键盘和鼠标作为游戏的操作设备.游戏的窗口都能接收来自键盘和鼠标设备的输人.当用户在键盘上按下按建或释放按键时,会产生相应的键盘事件:当用户移动 ...

  2. ArcGIS for Android入门(Java):初体验

    准备工作 开发工具:Android Studio 环境:jdk 11 (首次接触安卓开发,可能有的地方不太对,还请给位大佬多多指点) 项目搭建 打开Android Studio,点击New Proje ...

  3. 【Hibernate】02 快速入门

    环境搭建 : Windo7 x64 + IDEA 2018+ JDK 8+ Maven 3.0+ MySQL 5.0+ 创建Hibernate工程: 导入依赖坐标 <dependencies&g ...

  4. 制作Linux系统的启动盘

    我不是没有试过软碟通制作启动盘 在写入U盘的选项确认的时候,盘区不支持NTFS!? 另外什么大白菜和老毛桃这样的根本就不支持Linux镜像加载 还是百度的这个靠谱 https://jingyan.ba ...

  5. 亲测可用的 Linux(Ubuntu18.04下)可运行的超级玛丽奥(gym-super-mario-bros)游戏的仿真环境—————————可用于强化学习算法的游戏模拟器环境

    与前文中的俄罗斯方块游戏一样都是可以用于强化学习算法的游戏模拟器,这里介绍的是超级玛丽奥(gym-super-mario-bros)游戏的仿真环境. Python库,代码地址: https://git ...

  6. .NET 开源权限认证项目 MiniAuth上线

    前言 在Web应用项目中权限认证是个绕不开的话题,传统方法复杂又耗时.MiniAuth推出专为.NET开发者设计的简单.实用的权限认证项目. MiniAuth,作为ASP.NET Core的插件,让我 ...

  7. C#数据结构与算法实战入门指南

    前言 在编程领域,数据结构与算法是构建高效.可靠和可扩展软件系统的基石.它们对于提升程序性能.优化资源利用以及解决复杂问题具有至关重要的作用.今天大姚分享一些非常不错的C#数据结构与算法实战教程,希望 ...

  8. AtCoder Beginner Contest 329 F

    AtCoder Beginner Contest 329F F - Colored Ball (atcoder.jp)(启发式合并) 问题陈述 有 \(N\) 个编号为 \(1, 2, \ldots, ...

  9. GPL前世今生

    从事Linux开发的朋友一定都听过GPL,那么到底什么是GPL呢?他有什么作用呢?本文给大家做详细讲解. 一.GNU/GPL 在讲解GPL之前,我们必须先了解什么是GNU? 1. 什么是GNU GNU ...

  10. 一文教你如何用C代码解析一段网络数据包?【含代码】

    本文的目的是通过随机截取的一段网络数据包,然后根据协议类型来解析出这段内存. 学习本文需要掌握的基础知识: 网络协议 C语言 Linux操作 抓包工具的使用 其中抓包工具的安装和使用见下文: < ...