--- theme: fancy highlight: a11y-dark --- 本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/ "https://juejin.cn/post/7012210233804079141/")」，赢取创作大礼包，挑战创作激励金。 > 从今天起，YK菌要开始学习React了 ~ React基础系列，本篇说一些React基本概念，算是入门概述，根据B站尚硅谷React教学视频形成的笔记，适当加了一些自己的拓展。 [官方文档https://react.docschina.org/](https://react.docschina.org/) # 1. React 入门概述 ## 1.1 介绍用于动态构建用户界面的 JavaScript 库(只关注于视图) 1. 发送请求获取数据 2. 处理数据（过滤，整理格式等） 3. **操作DOM呈现页面**（React做的事情） React是一个将数据渲染为HTML视图的开源JavaScript库 ## 1.2 原生JavaScript的缺点 1. 原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI） 2. 使用JavaScript直接操作DOM，浏览器会进行大量的**重绘重排** 3. 原生JavaScript没有**组件化**编码方案，代码复用率很低 ### 【补充】浏览器重绘重排 [浏览器重绘(repaint)重排(reflow)与优化\[浏览器机制\]](https://juejin.cn/post/6844903745914929165#heading-3) **重绘**(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘 **重排**(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排 ### 【补充】模块化与组件化 - 模块 1. 理解：向外提供特定功能的js程序, 一般就是一个js文件 2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。 3. 作用：复用js, 简化js的编写, 提高js运行效率 - 组件 1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 2. 为什么要用组件：一个界面的功能更复杂 3. 作用：复用编码, 简化项目编码, 提高运行效率 **模块化**：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用 **组件化**：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用 ## 1.3 React的特点 1. 采用**组件化模式**、**声明式编码**，提高开发效率及组件复用率 2. 在 React Native中可以使用React语法进行**移动端开发** 3. 使用**虚拟DOM**+**Diff算法**，尽量减少与真实DOM的交互 ## 1.4. React高效的原因 1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 2. DOM Diffing算法, 最小化页面重绘。 # 2. Hello React ## 2.1 相关库介绍 - 旧版本 16.8.4 (March 5, 2019) - 新版本有不一样的会说明 1. react.js：React核心库。 2. react-dom.js：提供操作DOM的React扩展库。 3. babel.min.js：解析JSX语法代码转为JS代码的库。 ### 【补充】babel.js的作用 1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行 2) 只要用了JSX，都要加上`type="text/babel"`, 声明需要babel来处理 ## 2.2 使用JSX创建虚拟DOM ```javascript const VDOM =

Hello,React

``` ## 2.3 渲染虚拟DOM(元素) 1. 语法: `ReactDOM.render(virtualDOM, containerDOM)` 2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示 3. 参数说明 1) 参数一: 纯js或jsx创建的虚拟dom对象 2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div) ```html hello_react

``` ## 2.4 页面显示 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15326fdde62c48f6aaa9f40dd9641cff~tplv-k3u1fbpfcp-zoom-1.image) # 3. 创建虚拟DOM的两种方式 ## 3.1 纯JS方式(一般不用) ```html

``` ## 3.2 JSX方式 > JSX方式就是js创建虚拟DOM的语法糖 ```javascript

``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf6745a3c4c543e39e6328930178a223~tplv-k3u1fbpfcp-zoom-1.image) # 4. 虚拟DOM与真实DOM 打印输出虚拟DOM和真实DOM进行比较 ```javascript const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */

Hello,React

) //2. 渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) const TDOM = document.getElementById('demo') console.log('虚拟DOM',VDOM); console.log('真实DOM',TDOM); debugger; ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85719eba32c2439e920784a3f7d86d68~tplv-k3u1fbpfcp-zoom-1.image) 看看虚拟DOM身上有哪些属性 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e5bb24890b74ddeb8bc19e9d87b50d8~tplv-k3u1fbpfcp-zoom-1.image) 看看真实DOM身上有哪些属性 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad2d870967b54c1e9a2a01ac7bd0c59e~tplv-k3u1fbpfcp-zoom-1.image) 1. 虚拟`DOM`本质是`Object`类型的对象（一般对象） 2. 虚拟`DOM`比较 “**轻**”，真实`DOM`比较 “**重**”，因为虚拟`DOM`是`React`内部在用，无需真实`DOM`上那么多的属性 3. 虚拟`DOM`最终会被`React`转化为真实`DOM`，呈现在页面上 # 5. JSX入门 ## 5.1 概述 1. 全称: `JavaScript XML` 2. React定义的一种类似于XML的JS扩展语法: JS + XML本质是`React.createElement(component, props, ...children)`方法的语法糖 3. 作用: 用来简化创建虚拟DOM 1) 写法：`var ele =

Hello JSX!

` 2) 注意1：它不是字符串, 也不是HTML/XML标签 3) 注意2：它最终产生的就是一个JS对象 4. 标签名任意: HTML标签或其它标签 5. 标签属性任意: HTML标签属性或其它 ## 5.2 基本语法规则 1. 定义虚拟DOM时，不要写引号。 2. 标签中混入**JS表达式时**要用 `{ }`。 3. 样式的类名指定不要用 class，要用 `className`。（因为class是ES6中类的关键字，所以不让用） 4. 内联样式，要用 `style={{ key:value }}` 的形式去写。 5. 只有一个根标签 6. 标签必须闭合 7. 标签首字母 1) 若**小写字母**开头，则将该标签转为`html`中同名元素，若`html`中无该标签对应的同名元素，则报错。 2) 若**大写字母**开头，`React`就去渲染对应的组件，若组件没有定义，则报错。 ### 【补充】区分js表达式与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}` ## 5.3 总结 1) 遇到 `<` 开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析 2) 遇到以 `{` 开头的代码，以JS语法解析: 标签中的js表达式必须用`{ }`包含 PS: 「欢迎在评论区讨论，掘金官方将在[掘力星计划](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141")活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」