React学习(一)

2022/1/19 23:24:58

本文主要是介绍React学习(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本人学习视频为B站尚硅谷,视频连接为:尚硅谷React

React是什么?

官方定义:用于构建用户界面的 JavaScript 库(只关注于View)
尚硅谷总结:是一个将数据渲染为HTML视图的开源JavaScript 库

JS的缺点

1.原生js操作DOM繁琐,效率低(DOM-API操作UI)
2.使用js直接操作DOM,浏览器会进行打量的重绘重排
3.原生js没有组件化编码方案,代码复用效率低

React特点

1.采用组件化模式,声明式编码,提高开发效率及组件复用效率
2.在React Native可以使用React语法进行移动端开发
3.使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM交互
在原生JS当中进行数据的更新时,会直接将原来的数据重新赋值,不管是否重复
在这里插入图片描述
在React中,在对数据进行更新时,虚拟DOM会对数据进行匹配,如有重复数据则不会重新在渲染,只会挑选之前没有渲染的数据进行页面更新
在这里插入图片描述

第一个React

步骤

1.先引入React依赖包,依赖包分为旧版本和新版本,旧版本可能有些公司仍然在使用,本人旧版本学习为16.8版本
在这里插入图片描述
在这里插入图片描述
2.创建html文件
在这里插入图片描述
在这里插入图片描述

虚拟DOM的两种创建方式

使用jsx创建虚拟DOM

在这里插入图片描述
在使用js语法创建虚拟DOM时,如果是多重标签只能使用React全局对象不断去创建节点,比较麻烦,实际上JSX是JS的语法糖(简写方法)
在这里插入图片描述

真实DOM与虚拟DOM

1. React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面创建的就是一个简单的虚拟DOM对象
2. 虚拟DOM对象最终都会被React转换为真实的DOM
3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

在这里插入图片描述

真实DOM属性

在这里插入图片描述

虚拟DOM属性

在这里插入图片描述

JSX语法( JavaScript XML)

1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。
4.内联样式,要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭
7.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

在这里插入图片描述

在这里插入图片描述

JS代码与表达式区别

1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式:
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

在这里插入图片描述
在这里插入图片描述

模块与组件、模块化与组件化的理解

模块

向外提供特定功能的js程序, 一般就是一个js文件
作用:复用js, 简化js的编写, 提高js运行效率

组件

用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
作用:复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

使用React开发者工具调试

在这里插入图片描述
在这里插入图片描述
正常项目网页
在这里插入图片描述

函数式组件

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

执行了ReactDOM.render(…之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

类式组件

1.类中的构造器不是必须要写的,要对实例进行一些初始化的操作,如添加指定属性时才写。
2.如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的。
3.类中所定义的方法,都放在了类的原型对象上,供实例去使用。

在这里插入图片描述

组件

执行了ReactDOM.render(…之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。

在这里插入图片描述
在这里插入图片描述

state状态

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

在这里插入图片描述
填写onclick时的错误
在这里插入图片描述
填demo()的错误
在这里插入图片描述

在这里插入图片描述

点击事件

普通JS类中点击事件
在这里插入图片描述
在这里插入图片描述

案例

在这里插入图片描述
简写
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

props属性

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中
3. 通过标签属性从组件外向组件内传递变化的数据
4. 注意: 组件内部不要修改props数据 里面的数据是只读的

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

展开运算符

在这里插入图片描述
在这里插入图片描述

对类型进行限制

版本为16.8
在这里插入图片描述
将age:18改为age:'18’时显示的错误
在这里插入图片描述

简写方式

在这里插入图片描述

缺少static
在这里插入图片描述

补充类知识

在这里插入图片描述
在这里插入图片描述

构造器中的props

在这里插入图片描述

函数式组件传入props

在这里插入图片描述
在这里插入图片描述

refs属性

组件内的标签可以定义ref属性来标识自己
1. 通过onXxx属性指定事件处理函数(注意大小写)
(1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件—————— 为了更好的兼容性
(2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)————————为了的高效
2. 通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref

refs字符串形式用法(可能未来废弃)

在这里插入图片描述
在这里插入图片描述

回调函数形式

在这里插入图片描述
在这里插入图片描述
注意:这种内联函数形式中一旦render函数进行更新时,就会调用两次回调函数,第一次为null,第二次才是节点。需要用class类绑定事件来解决,更新render通过state变化来更新
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

采用createRef

在这里插入图片描述
在这里插入图片描述

事件处理

在这里插入图片描述
在这里插入图片描述



这篇关于React学习(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程