目录
4、 如果觉得下载的慢,可以使用 nrm use taobao 切换下载镜像
一、介绍
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> <!-- 引入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> <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> <!-- 引入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"> // 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也是可以的