目录

一、介绍

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的方式去写（一般不用）

2、使用JSX语法创建

注意：（1）把真实DOM树转成对象树，再通过diff算法，减少重绘与回流；

   <1>对象树

{html:[head: [],body: []]
}

   <2>DOM树

study
欢迎学习React知识

 

（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也是可以的