05-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")
)
05-react的类组件和函数组件 -- 状态 state的更多相关文章
- React - 组件:函数组件
目录: . 组件名字首字母一定是大写的 . 返回一个jsx . jsx依赖React,所以组件内部需要引入React . 组件传参 a. 传递. <Component list={ arrDat ...
- react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符
1.回顾 module.exports = { entry: {}, output: {}, plugins: [], module: {}, resolve: {}, devServe: {} } ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- react hooks 如何自定义组件(react函数组件的封装)
前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接和作者信息. 为了让代码更灵活,可以写更多的组件,我们把这种模 ...
- React Hook父组件获取子组件的数据/函数
我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- React 函数组件
React 函数组件 1.定义方式 React 函数组件是指使用函数方法定义的组件. 定义方式:与函数的定义方式相同,需要将内容 return 出来,需要注意的是最外层只有一个标签或者使用<&g ...
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
随机推荐
- 【Python】GUI开发笔记
一.环境搭建: 1.Pycharm开发工具 pycharm历史版本 https://www.jetbrains.com/pycharm/download/other.html 破解插件 https:/ ...
- 【Vant】Vant 开发笔记
手机端元素高度控制: 界面div标签超出了可视区域时,一定要设置高度: 让元素保持在可视区域滑动,Popup组件从底部渲染时才能正常 <div style="height: 100vh ...
- 教程 | 使用 Apache SeaTunnel 同步本地文件到阿里云 OSS
一直以来,大数据量一直是爆炸性增长,每天几十 TB 的数据增量已经非常常见,但云存储相对来说还是不便宜的.众多云上的大数据用户特别希望可以非常简单快速的将文件移动到更实惠的 S3.OSS 上进行保存, ...
- 【CMake系列】08-debug release特性设置
在构建的程序版本中,一共有 debug release minisize relwithDebugInfo四种,其中我们主要使用到就是 debug release 两种,这两种存在着一定的不同,deb ...
- Figma 替代品 Penpot 安装和使用教程
在设计领域,Figma 无疑是一个巨人.它彻底改变了设计流程,将协作带到了一个全新的高度.然而,随着 Adobe 收购 Figma 的消息传出,许多设计师和开发者开始担心:Figma 未来会如何演变? ...
- Windows 10 美化 Mac OSX 实用教程
我前几天给新电脑装上了Windows 10系统,想要美化一下,遇到了很多问题,就出了这篇博客,帮大家踩踩坑. 在开始之前,先提醒大家一句: 美化有风险,玩机需谨慎.为以防万一,请大家在进行任何操作前创 ...
- Flask细说
Flask框架 简介 特点: 微框架,间接,给开发者提供很大的扩展性 Flask和相应的插件写得很好,用起来很爽. 开发效率非常高,比如使用 SQLAlchemy 的 ORM 操作数据库可以节省开发者 ...
- Homebrew 卸载 Wireshark 报错
我在使用 Homebrew 安装 Wireshark 的时候,Homebrew 要求我输入密码.此时我又不想安转 Wireshark 了,于是我没有输入密码并且按下了 Ctrl + C.后来,我又尝试 ...
- Go make 介绍
Go 语言中的 make 函数用于创建和初始化特定类型的对象,主要是用于创建切片(slice).映射(map)和通道(channel).make 函数与 new 函数不同,new 函数是用于分配内存, ...
- 拼多多API出租,拼多多API租用,拼多多订单信息获取API,拼多多开放平台权限出租,拼多多开放平台API出租
当前,拼多多开放平台的审核还是比较严格的,虽然可以申请,但是难度很大,对于一些用户来说困难还是蛮大的 拼多多的API主要拼多多订单信息获取.拼多多商品上传,拼多多库存更新等 需要这块API的一般是需要 ...