React（1）—— React简介、JSX语法

• 【补充】什么是模块化？什么是组件化？

• 1.3 React的优势

• 1.4 React高效的原因

• 2.JSX语法

• • 2.1 JSX简介

• 2.2 JSX的使用规范

• 3.虚拟DOM

• • 3.1 虚拟DOM是什么？其本质是？

• 3.2 代码展示

---

1.React简介

============================================================================

1.1 React是什么？

---

用于动态构建用户界面的 JavaScript 库(只关注于视图)

1. 发送请求获取数据

2. 处理数据（过滤，整理格式等）

3. 操作DOM呈现页面（React做的事情）

React是一个将数据渲染为HTML视图的开源JavaScript库

1.2 原生JS的缺点

---

1. 原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）

2. 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排

3. 原生JavaScript没有组件化编码方案，代码复用率很低

【补充】什么是浏览器重绘重排？

• 重绘(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘

• 重排(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排

【补充】什么是模块化？什么是组件化？

• 模块

1. 理解：向外提供特定功能的js程序, 一般就是一个js文件

2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

3. 作用：复用js, 简化js的编写, 提高js运行效率

• 组件

4. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

5. 为什么要用组件： 一个界面的功能更复杂

6. 作用：复用编码, 简化项目编码, 提高运行效率

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

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

1.3 React的优势

---

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率

2. 在 React Native中可以使用React语法进行移动端开发

3. 使用虚拟DOM+Diff算法，尽量减少与真实DOM的交互

1.4 React高效的原因

---

1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

2. DOM Diffing算法, 最小化页面重绘。

2.JSX语法

==========================================================================

2.1 JSX简介

---

1. 全称: JavaScript XML

2. React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖

3. 作用: 用来简化创建虚拟DOM

React 使用 JSX 来替代常规的 JavaScript。使用 JSX 编写模板更加简单快速，大大提升了编程效率

2.2 JSX的使用规范

---

1. 样式类名调用时，不要用class，而是用className

Hello World!

2. 标签中混入JS“表达式”时要用 { }

const myData = ‘HeLlo rEaCt’

{myData}

3. 内联样式，要用style = {{ }} 并且value要用“驼峰写法”

const myData = ‘HeLlo rEaCt’

<span style = {{color:‘white’}}>{myData}

4. jsx要求： 不能多有个根标签，根标签只能有一个 例如：本案例只能有一个< h1>,解决办法 在外面包裹一层div标签或者<> </>

5. 标签必须闭合， 例如： < input type=“text”> 不可以这么写， 得写成： < input type=“text”/> （可自结束）

3.虚拟DOM

==========================================================================

3.1 虚拟DOM是什么？其本质是？

---

1. 本质是Object类型的对象 （一般对象）

2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性

3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

3.2 代码展示

---

最后

---

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。