为啥叫全家桶

由于本次学习中并非只学习react，在学习过程中还会提及到一些在用react做应用开发过程正还会用到的其他的库。这些内容呢合并在一起被称之为react全家桶。react全家桶中包含有以下内容：

  • react基础知识
  • react-router用于做路由的库
  • PubSub用于做消息管理的库
  • react-redux用于做集中式状态管理的库
  • Ant-Design所谓的精美的UI组件库

至于这些库虽然说我都已经听说了，但是我却并不知道他们具体是啥，干啥的，怎么用。这些在后续学习中慢慢来了解。

react是什么

当我们刚接触到一个之前从未接触过的东西时，我们的第一反应就是这个玩意儿到底是个啥啊？

根据官网给的解释说react是一个用于构建用户界面的JavaScript库。但是这一句话显得有些苍白无力。但是我们也是粗略的知道了这是一个JavaScript库。但是我们要注意到这句话中的关键词： 界面 。因为react只关注界面。或者说 视图 。

至于这个东西这么理解呢，举个小例子吧。

比如说在页面上要展示一些学生的信息。用原生的JavaScript或者jQuery来处理的话大概分为以下三步：

  1. 发送请求获取数据
  2. 把得到的数据做相关的数据清洗
  3. 使用JavaScript或者jQuery操作DOM呈现页面

但是如果使用了react的话，react不关心前两步操作的，react的侧重点完全在第三步。也就是说react会代替JavaScript或者jQuery来帮助我们来操作DOM来操作页面。也就意味着我们用react就不用亲自操作DOM了，但是前两步还是依然需要我们自己来做，而react并没有给我们提供任何有用的帮助。

那么通过上述所说的内容我们回过头再看官网所给的定义，我们来扩展一下，也就是说：react是一个将我们处理好的数据渲染成HTML视图的这么样一个开源的JavaScript库。通俗一点来说呢就是，你提供数据给react，那么react就帮你渲染成HTML视图。

react的特点

  • 组件化模式，声明式编码，提高开发效率及组件复用率

    • 介绍一下命令式编码：

      • 之前原生JavaScript或者jQuery都是命令式编码

      命令式编码是通过一系列命令来执行命令内容从而完成相应操作

      例如某人说自己渴了，请另外一个人向左走5步，然后右转再走7步，然后倒水，再往回走7步，然后左转再走5步，把水递给口渴的人。

      这个示例就是所谓的命令式编码

    • 介绍一下声明式编码。

      • react是声明式编码

      react的声明式编码是通过声明某个对象的属性，然后react来完成相应的操作

      例如某个人声明自己渴了，另外一个人自动去倒水然后递给口渴的人

      这个示例就是所谓的声明式编码

  • 命令式编码 和 声明式编码 的区别就好比 面向过程 与 面向对象 的区别

  • react navtive中可以使用react语法进行移动端开发

    • react native是一项可以使用前端技术来完成跨平台移动端开发的一项技术
    • Android是使用Java语言进行开发
    • IOS是使用Object C或者Swift进行开发
    • 而使用react native可以让前端开发人员直接使用react来进行Android和IOS端的开发

  • 使用虚拟DOM+Diffing算法，尽量减少与真实DOM的交互

    • 什么是虚拟DOM呢，就是字面上理解的意思。

      • 原生JavaScript或者jQuery操作的都是浏览器真实DOM
      • 而虚拟DOM就是react runtime在内存中操作的仅供react来使用的所谓的一种DOM
      • 虚拟DOM仅存储在内存中，由react根据具体场景映射成真实DOM

    • 至于Diffing算法，举个例子

        <!-- 存放人员列表的容器 -->
        <ul id="list"></ul>

        <script type="text/javascript">
          // 一些数据
            let personArr = [
            {id: "001", name: "name1", age: 18},
            {id: "002", name: "name2", age: 19}
          ];

          // 定义人员列表的 html 字符串
          let htmlStr = "";

          // 用数据生成人员列表
          personArr.forEach((person) => {
            htmlStr += `<li>{person.name}-{person.age}</li>`
          });

          // 操作 DOM 呈现界面
          document.getElementById("list").innerHTML = htmlStr
        </script>

test1.html最终展现出来的效果是：

我们从代码中可以看出原生JavaScript是直接操作真实DOM遍历在页面上生成了两个真实DOM

如果我们的数据量很大，而且数据发生了变动。比如原来页面上有99条数据，现在数据更新了，新增了1条数据变成了100条数据。那么整个页面又要重新遍历数据数组，之前的两条重复的数据完全没有被复用。

由此可见这种写法，页面上的真实DOM数量与数据量挂钩，数据量越大，真实DOM数越多

而react会使用虚拟DOM不直接操作真实DOM。

数据还是那些数据，但是react每条数据都会对应一个虚拟DOM。然后react会根据虚拟DOM来映射成真实DOM。乍一看仿佛和原生没有什么区别。

但如果还是像刚才一样，数据更新了，99条数据要新增1条数据，变成100条，其他不变。这样的话react会在内存中重新生成100个虚拟DOM。

但是在映射到真实DOM之前，react会拿这100个虚拟DOM，和之前生成的虚拟DOM进行比较，因为之前生成的虚拟DOM都存储在内存中并没有被丢弃，所以react会在内存中将前后两次生成的虚拟DOM进行差异性比对。

比对之后，如果两次拥有一部分相同的虚拟DOM的话react会直接复用页面上现存的这些虚拟DOM对应的真实DOM，仅将有差异的虚拟DOM映射成真实DOM，这样就大幅度提高了复用率。

所以react的Diffing算法，就好像是git一样，仅仅只更新有修改的部分

学react需要的JavaScript知识

  • 判断this的指向
  • class类
  • ES6语法
  • npm包管理器
  • 原型、原型链
  • 数组常用方法
  • 模块化

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/react_introduce/