本人学习视频为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
事件处理
标签：学习,DOM,标签,js,React,虚拟,组件 来源： https://blog.csdn.net/zouzi1/article/details/122528712
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。