![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 68
无名`
这个作者很懒,什么都没留下…
展开
-
React之getSnapshotBeforeUpdate举例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2022-04-26 07:43:44 · 191 阅读 · 0 评论 -
React新生命周期之getSnapshotBeforeUpdate使用场景
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>getSnapshotBeforeUpdate使用场景</title> <style> .list { width: 200px; height: 150px;...原创 2022-04-25 21:47:46 · 179 阅读 · 0 评论 -
React新生命周期之getSnapshotBeforeUpdate
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>新react生命周期</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-24 22:02:19 · 494 阅读 · 0 评论 -
React之getDerivedStateFromProps
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>新react生命周期</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-24 21:37:51 · 758 阅读 · 0 评论 -
React之新旧生命周期对比
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>新旧react生命周期对比</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-24 20:53:48 · 295 阅读 · 0 评论 -
React之总结生命周期
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_总结react生命周期</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-23 09:06:09 · 80 阅读 · 0 评论 -
React之生命周期-父组件render流程
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_react生命周期-父组件render流程</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!--...原创 2022-04-23 07:49:09 · 273 阅读 · 0 评论 -
React之生命周期-forceUpdate
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_react生命周期-forceUpdate</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!--...原创 2022-04-22 22:28:25 · 991 阅读 · 0 评论 -
React之生命周期-setState
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_react生命周期-setState</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心...原创 2022-04-22 20:57:25 · 524 阅读 · 0 评论 -
react之生命周期(旧)组件挂载流程代码+图片
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_react生命周期(旧)</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --&g...原创 2022-04-22 12:59:38 · 1089 阅读 · 0 评论 -
React之引出生命周期
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_不用函数柯里化的实现</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-21 21:02:38 · 70 阅读 · 0 评论 -
React之不用函数柯里化的实现
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_不用函数柯里化的实现</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-21 12:52:23 · 68 阅读 · 0 评论 -
React之高阶函数_函数柯里化
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>高阶函数_函数柯里化</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-20 22:07:50 · 297 阅读 · 0 评论 -
React之受控组件
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_受控组件</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> ...原创 2022-04-20 21:25:08 · 310 阅读 · 0 评论 -
React之非受控组件
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>1_非受控组件</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> ...原创 2022-04-20 19:38:52 · 51 阅读 · 0 评论 -
React之事件处理
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>事件处理</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> &l...原创 2022-04-19 20:52:20 · 69 阅读 · 0 评论 -
React之总结Ref
1.字符串形式ref,简单2.回调函数的ref,难点3.内联ref(调用两次,推荐)和绑定的ref4.createRef原创 2022-04-19 19:44:38 · 105 阅读 · 0 评论 -
React之createRef
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>4_createRef</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-19 19:37:56 · 1343 阅读 · 0 评论 -
React之回调ref中回调执行次数的问题
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>3_回调ref中回调执行次数的问题</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -...原创 2022-04-19 13:20:14 · 685 阅读 · 0 评论 -
React之回调函数形式的ref
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_回调函数形式的ref</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-19 20:53:36 · 246 阅读 · 0 评论 -
React之字符串形式的ref
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>1_字符串形式的ref</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-18 12:56:20 · 363 阅读 · 0 评论 -
React之props的简写方式和报错示范
1.修改name值,这里可以直接改1)这样写报错,因为props是只读的2.修改age值1)这样写没问题,age+12)这样写报错,因为props是只读的3.简写,将这两个放入class Person里面(两个地方的Person.去掉,加上static)放后为...原创 2022-04-13 20:11:35 · 361 阅读 · 0 评论 -
React之props限制
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_props限制</title></head><body> <!-- 准备好一个容器 --> <div id="test1"></div> <div id="test2"&g...原创 2022-04-04 10:30:15 · 1045 阅读 · 0 评论 -
React之props批量传递
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_props批量传递</title></head><body> <!-- 准备好一个容器 --> <div id="test1"></div> <div id="test2"...原创 2022-04-03 21:06:50 · 946 阅读 · 0 评论 -
展开运算符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2022-04-03 21:04:11 · 54 阅读 · 0 评论 -
React之state总结
1.理解1)可包含多个key-value2)更新state来更新页面显示2.注意1)render中this为组件实例对象2)组件方法中this为underfined,解决?a.bind()b.箭头函数3)更改state用setState()原创 2022-04-03 20:07:59 · 68 阅读 · 0 评论 -
state的简写方式
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>state的简写方式</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-03 19:57:03 · 133 阅读 · 0 评论 -
React之setState使用
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>React之setState使用</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --...原创 2022-04-03 19:23:39 · 1018 阅读 · 0 评论 -
React之解决类中的this
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>React之解决类中的this</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --&...原创 2022-04-03 18:49:54 · 81 阅读 · 0 评论 -
React之类的基本知识
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2022-04-03 16:49:13 · 55 阅读 · 0 评论 -
React之组件与模块
1.模块1)就是js文件2)为什么拆成模块,代码多、杂3)作用:复用js,简化js,提高js运行效率2.组件1)代码资源的集合(html、css、js、image)2)为什么:一个界面的功能复杂3)作用:复用编码,简化项目编码,提高运行效率3.模块化很多js文件4组件化多个组件...原创 2022-04-03 10:37:48 · 400 阅读 · 0 评论 -
React之jsx小练习
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>jsx小练习</title> <style> .title{ background-color: orange; width:200px; ...原创 2022-04-03 08:57:00 · 207 阅读 · 0 评论 -
React之函数式组件使用props
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>3_函数式组件使用props</title></head><body> <!-- 准备好一个容器 --> <div id="test1"></div> <div id="tes...原创 2022-03-31 17:55:22 · 1049 阅读 · 0 评论 -
React之类式组件中的构造器与props
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_类式组件中的构造器与props</title></head><body> <!-- 准备好一个容器 --> <div id="test1"></div> <div id="...原创 2022-03-31 17:23:58 · 826 阅读 · 0 评论 -
React之props基本使用
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>1_props基本使用</title></head><body> <!-- 准备好一个容器 --> <div id="test1"></div> <div id="test2"...原创 2022-03-31 16:29:18 · 130 阅读 · 0 评论 -
React之事件绑定
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>state事件绑定</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 -->...原创 2022-04-03 16:53:26 · 52 阅读 · 0 评论 -
React之初始化state
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>state</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> &...原创 2022-03-31 14:58:05 · 140 阅读 · 0 评论 -
React之类式组件
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>2_类式组件</title></head><body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> ...原创 2022-03-31 14:37:17 · 81 阅读 · 0 评论 -
React之函数式组件
<!DOCTYPE html><html><head> <meat charset="UTF-8"> <title>1_函数式组件</title> <style> .title{ background-color: orange; width:200px; ...原创 2022-03-31 11:27:08 · 128 阅读 · 0 评论 -
jsx语法规则
<student><name>Tom</name><age>19</age></student>"<"name":原创 2022-03-28 20:52:40 · 650 阅读 · 0 评论