React-1 基础知识

React-1 基础知识
目录

一、介绍

1、起源于Facebook，于2013年5月开源

2、用于构建用户界面的Javascript库

二、特点

1、声明式设计

2、高效：减少dom操作

3、灵活

4、JSX：JS拓展语法

5、组件：后面会讲到

6、单向响应的数据流

三、虚拟DOM：本质就是一个object对象

1、使用原生js的方式去写（一般不用）

2、使用JSX语法创建

四、搭建环境

1、全局安装：create-react-app

3、一种临时安装的方式

4、如果觉得下载的慢，可以使用 nrm use taobao 切换下载镜像

五、文档介绍

1、README.md：使用文档

2、node_modules：所有的依赖安装目录

3、package-lock.json：锁定依赖的版本号，团队开发时保持一致性

4、package.json：项目的配置文件

5、public：静态文件目录

6、src：开发用源代码目录

六、DOM的Diff算法

1、虚拟DOM中key的作用

2、用index作为key可能引发的问题

3、开发中如何选择key
一、介绍

1、起源于Facebook，于2013年5月开源

2、用于构建用户界面的Javascript库

二、特点

1、声明式设计

采用组件化模式，声明式编码，提高开发效率和组件复用性

2、高效：减少dom操作

3、灵活

4、JSX：JS拓展语法

5、组件：后面会讲到

6、单向响应的数据流

三、虚拟DOM：本质就是一个object对象

1、使用原生js的方式去写（一般不用）
```
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用js创建虚拟DOMtitle>
head>
<body>
    <div id="study">div>
body>
<script type="text/javascript" src="../js/react.development.js">script>
 
<script type="text/javascript" src="../js/react-dom.development.js">script>
 
<script>
    // 1.创建虚拟DOM
    const  VMDOM = React.createElement('h1',{id:'title'},'Hello,React');
    // 2.渲染虚拟DOM页面
    ReactDOM.render(VMDOM,document.getElementById('study'))
script>
html>
```
2、使用JSX语法创建
```
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用js创建虚拟DOMtitle>
head>
<body>
    <div id="study">div>
body>
<script type="text/javascript" src="../js/react.development.js">script>
 
<script type="text/javascript" src="../js/react-dom.development.js">script>
 
<script type="text/javascript" src="../js/babel.min.js">script>
 
<script type="text/babel">
    // 1.创建虚拟DOM
    const  VMDOM = <h1>Hello,Reacth1>;
    //注意：此处一定不要用引号，因为不是字符串
    
    // 2.渲染虚拟DOM页面
    ReactDOM.render(VMDOM,document.getElementById('study'))
script>
html>
```
注意：（1）把真实DOM树转成对象树，再通过diff算法，减少重绘与回流；

<1>对象树
```
{
    html:[
        head: [],
        body: []
    ]
}
```
<2>DOM树
```
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom treetitle>
 
head>
<body>
    <span id='web'>studyspan>
    <h1>欢迎学习React知识h1>
body>
<script>script>
html>
```
（2）虚拟dom上的属性比较少，真实dom属性多，因为虚拟dom只在recat内部使用，不需要用那么多的属性；

（3）虚拟dom最终会被react转换成真实dom，呈现再页面上；

四、搭建环境

1、全局安装：create-react-app

2、创建一个项目：create-react-app的名字（my）

进入创建的app里

开始运行项目

3、一种临时安装的方式

4、如果觉得下载的慢，可以使用 nrm use taobao 切换下载镜像

注意：提前安装node环境，这个前面Node里有讲到

五、文档介绍

1、README.md：使用文档

2、node_modules：所有的依赖安装目录

3、package-lock.json：锁定依赖的版本号，团队开发时保持一致性

4、package.json：项目的配置文件

5、public：静态文件目录

6、src：开发用源代码目录

六、DOM的Diff算法

1、虚拟DOM中key的作用

当状态中的数据发生改变时，react会根据【新数据】生成【新虚拟DOM】，随后react会进行【新虚拟DOM】和【旧虚拟DOM】的diff算法比较，具体的比较规则如下：

（1）若【旧DOM】中找到了与【新DOM】相同的key，则会进一步判断两者的内容是否相同，如果也一样，则直接使用之前的真实DOM，如果内容不一样，则会生成新的真实DOM，替换掉原先的真实DOM
（2）若【旧DOM】中没找到与【新DOM】相同的key，则直接生成新的真实DOM，然后渲染到页面

2、用index作为key可能引发的问题

（1）若对数据进行：逆序添加、逆序删除等破坏顺序的操作时会产生不必要的真实DOM更新，造成效率低下

（2）如果结构中还包含输入类的dom，会产生错误dom更新，出现界面异常

3、开发中如何选择key

（1）最好选中标签的唯一标识id、手机号等

（2）如果只是简单的展示数据，用index也是可以的
相关阅读:
[论文总结] 深度学习在农业领域应用论文笔记10
上手Python之函数进阶
 QT：使用行编辑器、滑动条、滚动条、进度条、定时器
 【Mobx和React的职责划分】Todos综合案例分析（附源码）
LeetCode每日温度
 教你面试的时候如何迅速完成90%以上的海量数据处理题
 《计算机图形学编程（使用OpenGL和C++）》笔记(1)-前言
 Kafka-3.0.1-Docker+集群踩坑笔记
 【splishsplash】PBDWrapper分析
 平面曲线与曲面
原文地址：https://blog.csdn.net/m0_62697897/article/details/127727881

一、介绍

1、起源于Facebook，于2013年5月开源

2、用于构建用户界面的Javascript库

二、特点

1、声明式设计

2、高效：减少dom操作

3、灵活

4、JSX：JS拓展语法

5、组件：后面会讲到

6、单向响应的数据流

三、虚拟DOM：本质就是一个object对象

1、使用原生js的方式去写（一般不用）

2、使用JSX语法创建

四、搭建环境

1、全局安装 ：create-react-app

3、一种临时安装的方式

4、 如果觉得下载的慢，可以使用 nrm use taobao 切换下载镜像

五、文档介绍

1、README.md：使用文档

2、node_modules：所有的依赖安装目录

3、package-lock.json：锁定依赖的版本号，团队开发时保持一致性

4、package.json：项目的配置文件

5、public：静态文件目录

6、src：开发用源代码目录

六、DOM的Diff算法

1、虚拟DOM中key的作用

2、用index作为key可能引发的问题

3、开发中如何选择key

1、全局安装：create-react-app

4、如果觉得下载的慢，可以使用 nrm use taobao 切换下载镜像