美文网首页
React的正确打开方式

React的正确打开方式

作者: learninginto | 来源:发表于2020-03-04 22:50 被阅读0次

    一、ReactJS简介

    • React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。结果发现这套框架很好用,就在2013年5月开源了

    • 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    • 特点

      声明式开发、组件化、单向响应数据流、函数式编程、JSX语法

    二、前端三大主流框架

    • Angular.js:出来最早的前端框架,学习曲线比较陡,NG1学起来比较麻烦,NG2开始,进行了一系列的改革,也开始启用组件化了;在NG中,也支持使用TS(TypeScript)进行编程;
    • Vue.js:最火、最流行的框架,它是中国人开发的,文档较友好;
    • React.js:受众、影响最广的框架,因为它的设计很优秀;

    三、React与vue.js的对比

    (一)组件化方面
    1. 什么是模块化:从代码的角度,去分析问题,把我们编程时候的业务逻辑,分割到不同的模块中来进行开发,便于代码的重用;

    2. 什么是组件化:从 UI 的角度,去分析问题,把一个页面,拆分为一些互不相干的小组件,随着我们项目的开发,我们手里的组件会越来越多。最后,我们如果要实现一个页面,可能直接把现有的组件拿过来进行拼接,就能快速得到一个完整的页面, 这样方便了UI元素的重用组件是元素的集合体

    3. Vue是如何实现组件化的

      vue 组件模板文件,浏览器不识别这样的.vue文件,所以,在运行前把 .vue 预先编译成真正的组件;

      • template: UI结构
      • script: 业务逻辑和数据
      • style: CSS样式
    4. React如何实现组件化:在React中实现组件化的时候,没有像 .vue 这样的模板文件,而是直接使用JS代码的形式,去创建任何你想要的组件;

      • React中的组件,都是直接在 js 文件中定义的;
      • React的组件,并没有把一个组件拆分为三部分(结构、样式、业务逻辑),而是全部使用JS来实现一个组件。
    (二)开发团队方面
    • React是由FaceBook前端官方团队进行维护和更新的;因此,React的维护开发团队,技术实力比较雄厚;
    • Vue:第一版,主要是有作者 尤雨溪 专门进行维护的,当 Vue更新到 2.x 版本后,也有了一个小团队进行相关的维护和开发;
    (三)社区方面
    • 在社区方面,React由于诞生的较早,所以社区比较强大,一些常见的问题、坑、最优解决方案,文档、博客在社区中都是可以很方便就能找到的;
    • Vue是近两年才诞生开源出来的,所以,它的社区相对于React来说,要小巧一些,所以,可能有的一些坑,没人踩过;
    (四)移动APP开发体验方面
    • Vue,结合 Weex 这门技术,提供了迁移到移动端App开发的体验(Weex,目前只是一个小的玩具, 并没有很成功的大案例;)
    • React,结合 ReactNative,也提供了无缝迁移到移动App的开发体验(RN用的最多,也是最火最流行的);
    (五)总结,为什么要学习React?
    1. 设计很优秀,是基于组件化的,方便我们UI代码的重用;
    2. 开发团队实力强悍,不必担心短更的情况;
    3. 社区强大,很多问题都能找到对应的解决方案;
    4. 提供了无缝转到 ReactNative 上的开发体验,让我们技术能力得到了拓展;增强了我们的核心竞争力

    四、React中几个核心的概念

    (一)虚拟DOM(Virtual Document Object Model)
    • DOM的本质是什么:就是用JS表示的UI元素
    • DOM和虚拟DOM的区别:
      • DOM是由浏览器中的JS提供功能,所以我们只能人为的使用浏览器提供的固定的API来操作DOM对象;例如:通过document.getElementById()的方式,这样的过程实际上是先去读取html的dom结构,将结构转换成变量,再进行操作。
      • 虚拟DOM:并不是由浏览器提供的,而是我们程序员手动模拟实现的,类似于浏览器中的DOM,但是有着本质的区别;
    • React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时一切操作和换算直接在变量中,每当数据变化时,React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A-B,B-A,React会认为A变成B,然后又从B变成A UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。
    (二)Diff算法
    • tree diff:新旧DOM树,逐层对比的方式,就叫做 tree diff,每当我们从前到后,把所有层的节点对比完后,必然能够找到那些 需要被更新的元素;
    • component diff:在对比每一层的时候,组件之间的对比,叫做 component diff;当对比组件的时候,如果两个组件的类型相同,则暂时认为这个组件不需要被更新,如果组件的类型不同,则立即将旧组件移除,新建一个组件,替换到被移除的位置;
    • element diff:在组件中,每个元素之间也要进行对比,那么,元素级别的对比,叫做 element diff;
    • key:key这个属性,可以把页面上的DOM节点和虚拟DOM中的对象,做一层关联关系;
    (三)React Fiber
    • 在react 16之后发布的一种react 核心算法,React Fiber是对核心算法的一次重新实现(官网说法)。之前用的是diff算法,更新过程是同步的,这可能会导致性能问题。
    • 当React决定要加载或者更新组件树时,会做很多事,比如调用各个组件的生命周期函数,计算和比对Virtual DOM,最后更新DOM树,这整个过程是同步进行的,也就是说只要一个加载或者更新过程开始,中途不会中断。因为JavaScript单线程的特点,如果组件树很大的时候,每个同步任务耗时太长,就会出现卡顿。
    • React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片,每一个小片的运行时间很短,虽然总时间依然很长,但是在每个小片执行完之后,都给其他任务一个执行的机会,这样唯一的线程就不会被独占,其他任务依然有运行的机会。

    相关文章

      网友评论

          本文标题:React的正确打开方式

          本文链接:https://www.haomeiwen.com/subject/izwwlhtx.html