React 之介绍（一）

最新推荐文章于 2023-06-12 11:30:21 发布

pan_mlpan

最新推荐文章于 2023-06-12 11:30:21 发布

阅读量282

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42272869/article/details/124511272

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

React 之介绍（一）

学了一段时间React了，我的前端还停留在h5+css阶段，趁现在有时间，学习学习react，随着自己学习，写一个React的学习专栏，便于自己更好掌握

官网链接：

React 介绍

React 是什么

React 是一套由Facebook开源用于动态构建用户界面的 JavaScript 库(只关注于视图)

React 的特点

声明式编码，采用声明范式，轻松描述应用
组件化编码，React 构建组件，通过组件复用简化代码，并能够很好的进行应用
React Native 编写原生应用
JSX：其是JS的扩展，在开发中不一定使用它，但建议使用
高效（优秀的Diffing算法）
- 不总是直接操作页面真实DOM，而是通过使用虚拟(virtual)DOM来操作页面
- DOM Diffing算法 , 最小化页面重绘

其中最重要的特点就是组件化编码与高效

JSX

JSX（ JavaScript XML）是由 react定义的一种类似于XML的JS扩展语法: JS + XML，其用来简化创建虚拟DOM ，本质是下面方法的语法糖

React.createElement(component, props, ...children)

var ele = <h1>Hello JSX!</h1>

注意：

它不是字符串, 也不是HTML/XML标签
它最终产生的就是一个JS对象
浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯JS的代码才能运行（借助babel.js，通过 **type=“text/babel” **声明需要babel来处理）

使用：

标签名任意: 可用HTML标签或其它标签
标签属性任意: 可用HTML标签属性或其它

基本语法规则：

遇到 < 开头的代码, 以标签的语法解析: html 同名标签转换为 html同名元素，其它标签需要特别解析
遇到以 { 开头的代码，以 JS语法解析: 其中标签中的 js 表达式必须用**{ }**包含

虚拟DOM与真实DOM

虚拟DOM：

本质是Object类型的对象（一般对象）
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
虚拟DOM最终会被React转化为真实DOM，编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

React 提供了一些 API 来创建一种 “特别” 的一般 JS 对象

// 创建一个简单的虚拟DOM对象
const VDOM = React.createElement('xx',{id:'xx'},'xx')

创建虚拟DOM的方式：

纯JS方式(一般不用)

<script type="text/javascript" > // 利用 js 方式
	//1.创建虚拟DOM  一个标签一个标签都要通过 React.createElement 来创建
	const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

JSX方式（符合JSX 语法）

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

虚拟DOM语法：

将虚拟DOM元素渲染到页面中的真实容器DOM中显示

 ReactDOM.render(virtualDOM, containerDOM)

说明

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

使用举例：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<div id="demo"></div>

	<!-- 引入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>

	<script type="text/babel" > /* 此处一定要写babel */
        //1.创建虚拟DOM
        const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
            <h1 id="title">
                <span>Hello,React</span>
            </h1>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
		// 真实dom
        const TDOM = document.getElementById('demo')
        console.log('虚拟DOM',VDOM);
        console.log('真实DOM',TDOM);
        debugger;
    </script>
</body>

log输出：

请添加图片描述

可以看到虚拟DOM就是一个对象，真实DOM则获取到了真实的标签

React 的基本使用

1、js包准备

1）去英文官网中文官网下载三个 jar包，然后放入项目中进行引用：

	<!-- 引入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>

不想去官网下载的，百度网盘自取：

链接: https://pan.baidu.com/s/1GFvVkOqRXGVyeJeCC55DoA?pwd=cw78 

提取码: cw78

2）也可直接引用 Staticfile CDN 的 React CDN 库地址：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用，效率低 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

3）也可直接引用官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 ，效率低-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

2、Hello_react 示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<!-- 引入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>

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

  <title>hello_react</title>

</head>

<body>

  <!-- 准备好一个“容器” -->

    <div id="test"></div>

  <!-- 引入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>



    <script type="text/babel" > /* 此处一定要写babel */

    //1.创建虚拟DOM

    const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */

    //2.渲染虚拟DOM到页面

    ReactDOM.render(VDOM,document.getElementById('test'))

  </script>

</body>

</html>

pan_mlpan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 之介绍（一）

React 之介绍（一）学了一段时间React了，我的前端还停留在h5+css阶段，趁现在有时间，学习学习react，随着自己学习，写一个React的学习专栏，便于自己更好掌握官网链接：英文官网中文官网React 介绍React 是什么React 是一套由Facebook开源用于动态构建用户界面的 JavaScript 库(只关注于视图)相关JS库：react.js：React核心库react-dom.js：提供操作DOM的react扩展库babel.min.js：解析JSX
复制链接

扫一扫