(PPT来源:尚硅谷)
目录
基础概念
(第三点 eg:
进行虚拟DOM比较)
入门
依赖包与Hello React
引入包:蓝色的核心库要在红色的核心库之前引入
直接利用 jsx 创建了虚拟 DOM
书写注意事项: babel…
虚拟DOM的两种创建方式
1. 使用 jsx 创建
代码:
2. 使用原始 js 创建
(不再需要 babel 将 jsx 转换为 js;type 还原为 javascript;用原始 js 创建虚拟DOM)
(过于复杂)
jsx 语法规则
- 快捷键
- 静态页面代码:
- 动态化代码:
模块与组件
- 拆模块:拆 js 文件,就是拆模块
拆组件:拆分更加细致
(eg:针对一个头部拆分为 html结构、css样式、js交互、img图片、video音视频…)
- 谷歌插件:开发者重的插件安装
面向组件编程
1. 函数式组件
- 代码(写一个方法作为组件)
(首字母大写;组件需要写为标签形式)
ES5 中的严格模式:禁止自定义函数里的 this 指向 window,其 this 为 undefined
(babel 翻译后开启了严格模式)
(babel 是一个 JavaScript 编译器)
其中 react 的工作流程:
2. 类式组件
- 类的复习
方法中调用方法,需要用 this 指明调用的实例对象,即在内方法前加 this
类中的 this:
构造器中的 this 一定是实例对象
render 里的 this 也是组件实例对象
函数式组件里的 this 为 undefined(严格模式:禁止自定义的 this 指向 window)
- 代码(写一个类作为组件):
渲染中的类需要写成标签形式,由 react new出一个实例
- 简单组件 & 复杂组件
简单组件:无state
复杂组件:有state
类式组件的三大核心属性
1. state
- 点击事件的写法:
前两种为原生写法,第三种为 react 便捷写法
- 解决类中 this 的指向问题
不解决时:onClick 点击事件直接调用的是这个函数,并不是从实例出发去调用的
而类中写的方法,多半都是给事件作为回调使用的
bind:生成新的函数、更改函数里 this 指向 undefined 的问题
(这句 使得 实例对象自身多了该方法)
- 写入状态:state 写成一个对象形式 state { }
修改状态:要用到内置 API setState
精简之后:
(1)构造器去除(state{ } 直接写在类中)
(2)更改 this 指向的方法简写:赋值语句 + 箭头函数
(箭头函数没有自己的 this,其函数中有 this 时会找外侧函数的 this 使用)
2. props
传递 props = 传递标签属性
- 代码
普通写法
批量传值
重点:
…三点运算符:
(1)展开数组(原生语法不可,react + babel 可以展开一个对象且仅适用于标签属性的传递)
(2)连接数组
(3)不确定传参数量时可用
(4)使用{…xxx}可以复制一个对象
- 对 props 进行限制
类型限制、必要性限制、指定默认值
- 简写
(props 是只读的,不允许直接更改 props)
对标签属性的限制、修改全部放于类中,赋予 static 关键字
2.1 类式组件的 构造器 & props
- 在类中通过实例访问props
构造器的2个作用:
综上,构造器能省略则省略
2.2 函数式组件 props
函数式组件没有自己的实例this,所以没有state(hooks中才可以)、refs属性
但是由于能够传入参数,所以可以使用 props
属性的限制、默认等,可以通过 . 写在外侧
props 总结
标签属性收集在props中,可以使用…批量传递
可以对标签属性进行限制:.propTypes、defaultProps
(构造器一般都可以省略)
3. refs & 事件处理
3.1 字符串形式的 ref
ref的键值对:ref的值 – ref 所处节点
refs中收集到的ref:页面真实DOM的节点(虚拟DOM转换之后)
3.2 回调形式的refs
- 字符串形式 refs 不太推荐,存在效率不高的问题:
- 目前,Reac官网推荐写法:回调形式
(ref 内直接定义一个函数,不需要自己调用,最终自动实现)
ref 的参数:ref 当前所处的节点;
把a节点放在了组件实例自身上,并取名为 input1
(箭头函数没有自己的 this,于是向外找,render 的 this 是组件实例对象)
(于是,将 ref 当前所处的节点挂在了实例自身上,并取名为 input1)
(见名知意,将随意的 a 改名为 currentNode,最终由 c 表示)
最终的实现:
- 回调次数的问题
更新过程中:清空 + 传入节点
PS:JSX的注释
问题的解决:定义为 class 绑定函数(将函数放在了实例自身)
3.3 createRef
缺点:专人专用,需要很多 React.createRef()
总结
事件处理
onClick等合成事件为了更好兼容;事件委托方式为了高效
event.target:发生事件的事件源
为了不过度使用 Refs,发生事件的事件源如果正好为操作的元素,则可以省略 ref