01-React入门

React概述

react是什么?

React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。

为什么学?

1.原生JS操作DOM繁琐,效率低

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

3.原生JS没有组件化编码方案,代码复用低

在学习之前最好看一下关于npm的知识:下面是我在网上看见的一个写的还不错的npm的文章

npm

React的特点

1.组件化开发,声明式编码,提高效率

  • 组件化开发:把复杂的代码,拆成一块一块组件,模块化开发
  • 声明式编码:比如我写了一个页面,页面上有一个蓝色的图形,我想改这个图形的颜色,我只需要通过改某个命令或者传入的某个参数就可以实现颜色的修改,不需要去修改这个页面代码,这便是声明式编码

2.在React Native中,使用React进行移动端开发

3.使用虚拟DOM+Diffing算法,减少真实DOM操作,大大提升效率

  • 虚拟DOM,是一种空间换时间的做法,数据先到虚拟DOM上,再通过虚拟DOM映射到真实DOM上,这种做法只有第一次页面加载时会稍慢一些(因为加了一层虚拟DOM到真实DOM的映射)。但是在后续数据变更,DOM修改的时候,就会明显体现优势。以前DOM更新操作只会去更新全体数据区域,消耗极大,而虚拟DOM在更新前会进行比对(Diffing算法),只更新需要更新的内容,减少新建开销,从而优化性能

以H5+JS引入的原生方式开始React

依赖导入

在这里插入图片描述
既然是原生H5,那么就要用script标签引入React的js依赖
介绍一下需要的js依赖,这三个是非常基础的库,而且一定要按图上固定的顺序导入
在这里插入图片描述

最后引入babel标签,告诉编译器,这里需要去从JSX转换成JS
01-React入门_第1张图片
注意:

你可能感兴趣的:(react.js,前端,前端框架)