React-1 基础知识

最新推荐文章于 2024-08-25 09:57:22 发布

傻乎乎的小不点

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量307

点赞数 2

文章标签： react.js 前端前端框架

本文链接：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、起源于Facebook，于2013年5月开源

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

二、特点

1、声明式设计

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

2、高效：减少dom操作

3、灵活

4、JSX：JS拓展语法

5、组件：后面会讲到

6、单向响应的数据流

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

1、使用原生js的方式去写（一般不用）
<!DOCTYPE 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创建虚拟DOM</title>
</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语法创建
<!DOCTYPE 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创建虚拟DOM</title>
</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,React</h1>;
    //注意：此处一定不要用引号，因为不是字符串
    
    // 2.渲染虚拟DOM页面
    ReactDOM.render(VMDOM,document.getElementById('study'))
</script>
</html>
注意：（1）把真实DOM树转成对象树，再通过diff算法，减少重绘与回流；

<1>对象树
{
    html:[
        head: [],
        body: []
    ]
}
<2>DOM树
<!DOCTYPE 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 tree</title>

</head>
<body>
    <span id='web'>study</span>
    <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也是可以的