React全家桶： React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则

默海笑

已于 2022-05-19 20:34:45 修改

阅读量356

点赞数

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

于 2022-05-18 18:01:29 首次发布

本文链接：https://blog.csdn.net/qq_50892584/article/details/124847826

版权

React学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写在前面

在最近看了React之后，一直觉得学的懵懵然，虽然很多大佬的手写笔记，写的都很不错，但是我一直没有我想要的那种细无巨细，比如类式组件this指向问题的追根溯源，又比如三大实例属性简写的由来，总之我还是决定做一份事无巨细的笔记。

那就让我们开始吧！

react简介

讲解内容介绍

本视频会讲解：

React基础

其他库的使用：

React-Router ：做路由的库
PubSub、Redux ：消息管理的库
Redux：集中式管理的库
Ant-Design：精美的UI组件库

1.React是什么？

React是用于构建用户界面的JavaScript库。

在页面上展示信息的步骤：

构建步骤：

1.发送请求获取数据

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

3.操作DOM呈现页面

React管理第三步、负责操作DOM对象。

老师的对React定义：React是一个将数据渲染为HTML视图的开源JavaScript库。

2.React是谁开发的？

由Facebook开发、且开源。

1.起初由Facebook 的软件工程师Jordan Walke创建。

2.于2011年部署于Facebook的newsfeed。

3.随后在2012年部署于Instagram。

4.2013年5月宣布开源。

3.为什么要学习React？

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

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

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

部分概念解答

一、 DOM-API

注意：这里不知道DOM-API的，请看下面传送门

https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction

二、模块化、组件化

后面会详细写到。

4.React的特点

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

2.在React Native中可以使用React语法进行移动端开发。（拿js做移动端开发）

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

部分概念解答

一、命令式编码、声明式编码

传送门：

https://www.csdn.net/tags/NtTaUg1sMzQ1MDctYmxvZwO0O0OO0O0O.html

命令式编程：

命令式编程的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。
比如：如果你想在一个数字集合 collection(变量名) 中筛选大于 5 的数字，你需要这样告诉计算机：

第一步，创建一个存储结果的集合变量 results；

第二步，遍历这个数字集合collection；

第三步：一个一个地判断每个数字是不是大于 5，如果是就将这个数字添加到结果集合变量 results 中

声明式编程：

声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。

二、虚拟DOM、Diffing算法

官网传送门

虚拟DOM

https://zh-hans.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom

Diffing算法

https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm

5.学习React之前你要掌握的JavaScript基础知识

判断this的指向

class(类)

ES6语法规范

npm包管理器

原型、原型链

数组常用方法

模块化

hello react 案例

版本问题

旧版本：讲解16.8

旧版本中4大依赖包

babel.min.js

ES6 转换 ES5

例如：模块化书写import

jsx 转换 js

react.development.js

react的核心库

react-dom.development.js

react的扩展库：react帮忙操作dom

书写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 =
         // 创建虚拟DOM
        <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */ 
        //2.渲染虚拟DOM到页面
         ReactDOM.render(VDOM,document.getElementById('test')) /* 调用render这个API  */ 
    </script>
</body>

</html>

实现效果

type=“text/babel”

这里表示script标签中书写的不是js而是jsx。

一些警告

1.需要添加网站图标

2.实际开发中并不会这样使用

3.下载react工具

虚拟DOM的两种创建方式

1.使用React.createElement这个API来书写虚拟DOM

注意：不用引入babel库

官网：传送门

https://zh-hans.reactjs.org/docs/react-api.html#createelement

2.使用jsx语法

官网：传送门

https://zh-hans.reactjs.org/docs/react-without-jsx.html

jsx：就是为了更加简单方便的创建虚拟dom。并且更加具有层叠性。

虚拟DOM与真实DOM

虚拟DOM

关于虚拟DOM：

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

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

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

真实DOM

console.log('真实DOM',TDOM); 这里得使用debugger。这样可以防止操作台直接输出标签。

jsx语法规则

1. 全称: JavaScript XML

XML早期用于存储和传输数据

<student>
        <name>Tom</name>
        <age>19</age>
</student>

JSON

有2个常用方法 JSON.stringify 将对象转换为 JSON。JSON.parse 将 JSON 转换回对象。

https://zh.javascript.info/json#jsonstringify

jsx语法规则：

1.定义虚拟DOM时，不要写引号。

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

3、JSX和html的标签属性的区别

HTML标签属性	JSX	原因
for	htmlFor	for在JS中为for循环关键字
class	className	class在JS中为声明类关键字
style	需使用JS对象(使用双花括号-- {{}} )	最外面的{}代表这里要书写js表达式、里面的{}表示这里书写的是一个对象。

例如：

<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>

4.只有一个根标签

5.标签必须闭合

6.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

JSX小练习

遍历

1.直接遍历数组，会缺失li等等结构。

<script type="text/babel" >
        //模拟一些数据
        const data = ['Angular','React','Vue']
        //1.创建虚拟DOM
        const VDOM = (
                <div>
                        <h1>前端js框架列表</h1>
                        <ul>
                                {data}
                        </ul>
                </div>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>

遍历对象？

<script type="text/babel" >
        //模拟一些数据
       	const data = {1:'Angular',2:'React',3:'Vue'}
        //1.创建虚拟DOM
        const VDOM = (
                <div>
                        <h1>前端js框架列表</h1>
                        <ul>
                                {data}
                        </ul>
                </div>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>

使用for循环？

直接报错！

总结：

一定注意区分：【js语句(代码)】与【js表达式】

一、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

        下面这些都是表达式：
                (1). a
                (2). a+b
                (3). demo(1)
                (4). arr.map() 
                (5). function test () {}

二、语句(代码)：

      下面这些都是语句(代码)：
                                    (1).if(){}
                                    (2).for(){}
                                    (3).switch(){case:xxxx}

使用map遍历

代码

<ul>
        {

                data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                })
        }
</ul>