本文主要是介绍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学习（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！