学习
tjh0001
新手菜鸟,请多多指教
展开
-
react学习笔记_diff算法
一、验证diff算法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证diff算法</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <scri原创 2021-05-24 21:50:20 · 132 阅读 · 0 评论 -
react学习笔记_生命周期
一、引出生命周期 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引出生命周期</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <原创 2021-05-24 21:43:19 · 235 阅读 · 3 评论 -
react学习笔记_受控和非受控组件
一、非受控组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非受控组件</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <scr原创 2021-05-24 21:31:53 · 136 阅读 · 0 评论 -
react学习笔记_事件处理
(1).通过onXxx属性指定事件处理函数(注意大小写) a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性 b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效 (2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref <!DOCTYPE html> <html lang="en">...原创 2021-05-24 21:27:03 · 85 阅读 · 0 评论 -
react学习笔记_组件实例三大属性
一、state 强烈注意 组件中render方法中的this为组件实例对象 组件自定义的方法中this为undefined,如何解决? 强制绑定this: 通过函数对象的bind() 箭头函数 状态数据,不能直接修改或更新 1、完整方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>state</title> &原创 2021-05-24 21:23:57 · 87 阅读 · 0 评论 -
react学习笔记_组件的定义
一、函数式组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数式组件</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <sc原创 2021-05-24 20:36:30 · 67 阅读 · 0 评论 -
react学习笔记_jsx小练习
一定注意区分:【js语句(代码)】与【js表达式】 1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方 下面这些都是表达式: (1). a (2). a+b ...转载 2021-05-24 20:28:07 · 62 阅读 · 0 评论 -
react学习笔记_jsx语法规则
jsx语法规则: 定义虚拟DOM时,不要写引号 标签中混入JS表达式时要用{} 样式的类名指定不要用class,要用className 内联样式,要用style={{key:value}}的形式去写 只有一个根标签 标签必须闭合 标签首字母 若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错 若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错 <!DOCTYPE html> <html lang=".原创 2021-05-24 20:26:00 · 72 阅读 · 0 评论 -
react学习笔记_虚拟DOM与真实DOM
关于虚拟DOM: 1.本质是Object类型的对象(一般对象) 2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。 3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>虚拟...原创 2021-05-24 20:22:26 · 89 阅读 · 0 评论 -
react学习笔记_脚手架的使用与介绍
react学习笔记_脚手架的使用与介绍原创 2021-05-24 17:30:15 · 389 阅读 · 0 评论