React 学习笔记

  Ｒｅａｃｔ简介

目录

  

1.react是什么？

　　  2.为什么要学习react?

3.react的特点

---

1.react是什么？

 官网对自己的定义：

 

 其中“界面” react只关注界面。 界面可以当作视图

      如：有一个需求，要求在页面上展示什么信息。需要经过以下步骤

             1.发送请求获取数据

             2.处理数据（过滤，整理格式）

             3.操作DOM展现页面，此时react会操作DOM

  核心： react 是一个将数据渲染成HTML视图的开源JavaScript库

 2.为什么要学习react?

  1. 原生JavaScript 操作DOM繁琐、效率低（DOM-API操作UI）

document.getElementById('app')
document.querySelector('#app')
document.getElementsByTagName('span')

   如图，代码繁琐，效率低

    每次对DOM进行操作，浏览器会重新进行绘图和排列。频繁的操作浏览器会频繁的工作。

  这样效率很低。

  用jquery 只是代码量少了，但是还是直接操作DOM，浏览器会进行大量的重绘重排。

 2.使用JavaScript直接操作DOM，浏览器需进行大量的重绘重排

 3.原生JavaScript没有组件化编码方案，代码复用率低

    模块化：a.js 直接可以导入js文件。

    组件化：不仅拆js ,html css也拆 

3.react的特点

   1.采用组件化模式、声明编码，提高开发效率以及组件复用率

          命令式编码：如要改一个盒子的颜色，需要用js或jquery 拿到这个盒子，然后.style改变颜色

      这种命令式编程少一步都不行，不拿到会少节点，不.style又会改不了颜色

          声明式编码：通过一些语法，声明其颜色是蓝色，然后react帮忙操作DOM去改变颜色。

  2.在React Native 中可以使用React 语法进行移动端开发

   3.使用虚拟DOM技术，编写了优秀的Diffing 算法，尽量减少了与真实DOM交互

          之前的.style改变样式，是直接改变真实DOM 

     每次改变数据，都会重新渲染整个真实DOM,未改变的数据也会重新渲染 

         虚拟DOM:不是真实的DOM，是供react使用的DOM，并未放在页面上，而是放在代码运行时电脑的内存里

      用react 产生虚拟DOM，再渲染到真实DOM中，一旦数据发生改变，又会重新产生虚拟 DOM，这个DOM会与之前的DOM进行比较，仅把改变或增加的部分，再次渲染到真实DOM中。 

   diff算法：     

      diff 算法作用：通过虚拟节点的比较，返回patch对象，对象中储存了节点的不同点，用patch中储存的不同来更新dom。