初步了解react-babel-虚拟DOM-JSX-类组件-函数式组件

最新推荐文章于 2024-05-09 18:04:39 发布

程序媛~~~

最新推荐文章于 2024-05-09 18:04:39 发布

阅读量648

点赞数 3

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/weixin_57218747/article/details/117374981

版权

一初步了解React

需要理解的概念有：

什么是六何分析法？
利用六何分析法剖析 React
如何查看哪些项目是用 reactjs 进行开发的
学习 ReactJs 常用的 JavaScript 语法内容

1.什么是六何分析法？

5W1H（WWWWWH）分析法也叫六何分析法，是一种思考方法，也可以说是一种创造技法 (opens new window)。它在 1932 年，由美国政治学家拉斯维尔提出“5W 分析法 (opens new window)”，后经过人们的不断运用和总结，逐步形成了一套成熟的“5W+IH”模式。

5W+1H：是对选定的项目、工序或操作，都要从原因（何因 Why）、对象（何事 What）、地点（何地 Where）、时间（何时 When）、人员（何人 Who）、方法（何法 How）等六个方面提出问题进行思考。

所以，对于 reactjs 我们同样也可以利用六何分析法进行分析与了解。

2.利用六何分析法剖析 React

React 的官方网站：

英文官网: https://reactjs.org/(opens new window)
中文官网: https://react.docschina.org/

React 的特点：

声明式编码 https://www.cnblogs.com/guanghe/p/6600076.html
组件化编码
React Native 编写原生应用
高效（优秀的 Diffing 算法）

React 高效的原因：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZlRaXbH-1622209765448)(http://qn.chinavanes.com/qiniu_picGo/image-20210526194406536.png)]

DOM Diffing 算法，最小化页面重绘。

3.复习 JavaScript 语法

Javascript 的概念：原型、原型链
ES6 语法：变量、箭头函数、数组、对象、参数、赋值、异步、承诺机制、类

ES6常见数组操作

增删：push(后增) pop(前删) shift(后删) unshift(前增)

遍历：map fifter forEach reduceRight…

查找：find findindex

可以封装成哪些？函数 < 类 < 模块
判断 this 的指向
npm 包的管理
模块化开发的概念
…

二 React的HelloWorld

1.React 运行环境的依赖资源

React 运行环境的依赖资源下载(opens new window)

React 运行环境的依赖资源说明：(按照顺序放置)

react.development.js（React 的核心库，当前版本为开发版本）
react-dom.development.js（React 的扩展库，当前版本主要操作 DOM 渲染，因为现在开发环境是在 PC 网页端）
babel.min.js（ES6 转 ES5，JSX 转 JS）
prop-types.js（属性类型的检测与约束库）

2.引入 React

2.1 当引入text/javascript时

text/javascript只能支持的是js语法，它将不能支持react中的jsx语法

创建一个虚拟DOM

JS中的变量声明var,const,let
此处绝对不能用引号，因为引号设置后变成字符串，但是我们想要的是虚拟DOM对象
如果不设置引号，那么创建出来的h1是JSX对象，但是text/javascript是不支持JSX

2.2 当引入text/babel时， React 运行环境的依赖资源，渲染基本内容

需要将VDOM转成真实的DOM，并且插入到页面上

先要找到test的真实元素
寻找到元素以后，将虚拟DOM渲染到真实DOM上

渲染目标如图所示：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备一个空的DOM容器，后期react会往其中加入解析完的结构 -->
		<div id="test"></div>

		<!-- type="text/javascript"的时候编写的是Js，但React中主要处理的是JSX -->
		<script type="text/babel">
			/* 此处一定要写上babel，因为我们写的不是js是jsx要靠babel解析 */
			/*
		1.创建一个虚拟DOM
		1)回顾var、const、let的JS变量声明方式
		2)考虑'<h1>Hello,React!</h1>'与<h1>Hello,React!</h1>的差异
		3)此处一定不要加引号，因为这是jsx中创建虚拟DOM的特殊语法
		*/
			const VDOM = <h1>Hello,React!</h1>;
			console.log(VDOM

最低0.47元/天解锁文章

程序媛~~~

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初步了解react-babel-虚拟DOM-JSX-类组件-函数式组件

一初步了解React需要理解的概念有：什么是六何分析法？利用六何分析法剖析 React如何查看哪些项目是用 reactjs 进行开发的学习 ReactJs 常用的 JavaScript 语法内容1.什么是六何分析法？5W1H（WWWWWH）分析法也叫六何分析法，是一种思考方法，也可以说是一种创造技法 (opens new window)。它在 1932 年，由美国政治学家拉斯维尔提出“5W 分析法 (opens new window)”，后经过人们的不断运用和总结，逐步形成了一套成熟的“
复制链接

扫一扫