// 函数组件是无状态的 既没有数据的  类似 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. 【Vue2】Vue-Cli使用

    1.需要NodeJS环境支持,此处省略NodeJS安装 2.使用NPM命令安装CLI包 vue-cli是npm.上的一个全局包,使用npm install 命令,即可方便的把它安装到自己的电脑上: n ...

  2. 再探 游戏 《 2048 》 —— AI方法—— 缘起、缘灭(1) —— Firefox浏览器下自动运行游戏篇

    四年前曾经写过一过博客: 对 游戏 < 2048 > 的一些思考 虽然过去几年了,但是这个游戏一直没有搞懂该怎么使用AI算法来进行求解,这里再次对这个问题进行一些探索. ========= ...

  3. 高校教编程是否应该将Python作为主语言

    偶读一文:https://www.cnblogs.com/qing-gee/p/12941219.html 想到了这样的一个老问题,个人搞计算机软件开发.人工智能的时间已经十余年,虽然个人能力有限但是 ...

  4. Java反射初探123456789

    牛逼的框架都反射,不要问我为什么,因为我也不知道 可能是因为生成了class文件没法实例化,所以只能反射创建对象,但是在spring中,ioc就是反射实现的控制反转 看Spring4.x企业级开发实战 ...

  5. 全网最适合入门的面向对象编程教程:35 Python的内置数据类型-文档字符串和__doc__属性

    全网最适合入门的面向对象编程教程:35 Python 的内置数据类型-文档字符串和__doc__属性 摘要: 在 Python 中,文档字符串(Docstring)是一种用于为模块.类.方法或函数编写 ...

  6. 9组-Beta冲刺-2/5

    一.基本情况(15分) 队名:不行就摆了吧 组长博客:9组-Beta冲刺-2/5 GitHub链接:https://github.com/miaohengming/studynote/tree/mai ...

  7. 聊一聊 Netty 数据搬运工 ByteBuf 体系的设计与实现

    本文基于 Netty 4.1.56.Final 版本进行讨论 时光芿苒,岁月如梭,好久没有给大家更新 Netty 相关的文章了,在断更 Netty 的这段日子里,笔者一直在持续更新 Linux 内存管 ...

  8. 解决Windows突然自动重启卡logo

    一般重启后或者卡logo我们需要查看日志 进入后查看日志 点击筛选当前日志 输入eventlog 找到重启的时间错误ID,记住这个事件ID 我们再次点击筛选当前日志页面 选择清除,点击确定 然后我们找 ...

  9. Web端OA办公后台管理系统(使用AxureRP设计)思路与效果分享

    本期带来一套OA办公后台管理系统(办公一体化)的设计分享.本次的作品设计,使用AxureRP软件. 一套实用的后台OA系统,一定是功能强大.能覆盖常用功能的.本次分享的系统,包含组织.员工管理.考勤. ...

  10. win32 对话框模板添加加速键

    今天想在菜单中添加加速键的时候,因是用的对话框模板,不能接受WM_KEYDOWN消息, 在网上收了半天,都不理想,最后在看WM_COMMAND的时候发现有个 wparam的低位有个加速键标识 最后把这 ...