【React】入门概述 - 虚拟DOM与原生DOM - JSX语法 - React基本使用

最新推荐文章于 2023-04-19 20:05:17 发布

YK菌

最新推荐文章于 2023-04-19 20:05:17 发布

阅读量3.1k

点赞数 6

分类专栏：前端框架React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_44972008/article/details/117457650

版权

本文介绍了React的基本概念和优势，详细讲解了React如何通过虚拟DOM提高效率，并探讨了JSX语法及其在创建虚拟DOM中的应用。同时，文章补充了浏览器的重绘重排原理和模块化组件化的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从今天起，YK菌要开始学习React了 ~

官方文档https://react.docschina.org/

1. React 入门概述

1.1 介绍

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

发送请求获取数据
处理数据（过滤，整理格式等）
操作DOM呈现页面（React做的事情）

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

1.2 原生JavaScript的缺点

原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
原生JavaScript没有组件化编码方案，代码复用率很低

【补充】浏览器重绘重排

浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]

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

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

【补充】模块化与组件化

模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

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

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

1.3 React的特点

采用组件化模式、声明式编码，提高开发效率及组件复用率
在 React Native中可以使用React语法进行移动端开发
使用虚拟DOM+Diff算法，尽量减少与真实DOM的交互

1.4. React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

2. Hello React

2.1 相关库介绍

旧版本 16.8.4 (March 5, 2019)
新版本有不一样的会说明

react.js：React核心库。
react-dom.js：提供操作DOM的React扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。

【补充】babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

2.2 使用JSX创建虚拟DOM

const VDOM = <h1>Hello,React</h1>

2.3 渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明

参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>hello_react</title>
</head>

<body

最低0.47元/天解锁文章