React 简介及核心概念

1. React简介

  • React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram(照片交友) 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
  • Angular1 诞生于2009年 , 后被谷歌收购 经典的MVC框架 不支持 组件化开发
  • 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
  • 清楚两个概念:
    • library(库):小而巧的库,只提供了特定的API;优点就是 船小好掉头,可以很方便的从一个库切换到另外的库;但是代码几乎不会改变;
    • Framework(框架):大而全的是框架;框架提供了一整套的解决方案;所以,如果在项目中间,想切换到另外的框架,是比较困难的;

2. 前端三大主流框架

三大框架一大抄

  • Angular.js:出来较早的前端框架,学习曲线比较陡,NG1学起来比较麻烦,NG2 ~ NG5开始,进行了一系列的改革,也提供了组件化开发的概念;从NG2开始,也支持使用TS(TypeScript)进行编程;
  • Vue.js:最火(关注的人比较多)的一门前端框架,它是中国人开发的,对我我们来说,文档要友好一些;
  • React.js:最流行(用的人比较多)的一门框架,因为它的设计很优秀;

3. React与vue的对比

组件化方面

  1. 什么是模块化:是从代码的角度来进行分析的;把一些可复用的代码,抽离为单个的模块;便于项目的维护和开发;

  2. 什么是组件化: 是从 UI 界面的角度 来进行分析的;把一些可服用的UI元素,抽离为单独的组件;便于项目的维护和开发;

  3. 组件化的好处:随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件,拼接为一个完整的页面;

  4. Vue是如何实现组件化的: 通过 .vue 文件,来创建对应的组件;

    • template 结构
    • script 行为
    • style 样式
  5. React如何实现组件化:大家注意,React中有组件化的概念,但是,并没有像vue这样的组件模板文件;React中,一切都是以JS来表现的;因此要学习React,JS要合格;ES6 和 ES7 (async 和 await) 要会用;

开发团队方面

  • React是由FaceBook前端官方团队进行维护和更新的;因此,React的维护开发团队,技术实力比较雄厚;
  • Vue:第一版,主要是有作者 尤雨溪 专门进行维护的,当 Vue更新到 2.x 版本后,也有了一个以 尤雨溪 为主导的开源小团队,进行相关的开发和维护;

社区方面

  • 在社区方面,React由于诞生的较早,所以社区比较强大,一些常见的问题、坑、最优解决方案,文档、博客在社区中都是可以很方便就能找到的;
  • Vue是近两年才火起来的,所以,它的社区相对于React来说,要小一些,可能有的一些坑,没人踩过;

移动APP开发体验方面

  • Vue,结合 Weex 这门技术,提供了 迁移到 移动端App开发的体验(Weex,目前只是一个 小的玩具, 并没有很成功的 大案例;)
  • React,结合 ReactNative,也提供了无缝迁移到 移动App的开发体验(RN用的最多,也是最火最流行的);

4. 为什么要学习React

  1. 和Angular1相比,React设计很优秀,一切基于JS并且实现了组件化开发的思想;
  2. 开发团队实力强悍,不必担心断更的情况;
  3. 社区强大,很多问题都能找到对应的解决方案;
  4. 提供了无缝转到 ReactNative 上的开发体验,让我们技术能力得到了拓展;增强了我们的核心竞争力;
  5. 很多企业中,前端项目的技术选型采用的是React.js;

5. React中几个核心的概念

虚拟DOM(Virtual Document Object Model)

  • DOM的本质是什么:浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 DOM 对象的API;
  • 什么是React中的虚拟DOM:是框架中的概念,是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套;
  • 为什么要实现虚拟DOM(虚拟DOM的目的): 为了实现页面中, DOM 元素的高效更新
  • DOM和虚拟DOM的区别
    • DOM: 浏览器中,提供的概念;用JS对象,表示页面上的元素,并提供了操作元素的API;
    • 虚拟DOM: 是框架中的概念;而是开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系;
      • 本质: 用JS对象,来模拟DOM元素和嵌套关系;
      • 目的:就是为了实现页面元素的高效更新;

Diff算法

  • tree diff: 新旧两棵DOM树,逐层对比的过程,就是 Tree Diff; 当整颗DOM逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;

  • component diff: 在进行Tree Diff的时候,每一层中,组件级别的对比,叫做 Component Diff;

    • 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
    • 如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上;
  • element diff: 在进行组件对比的时候,如果两个组件类型相同,则需要进行 元素级别的对比,这叫做 Element Diff;

在这里插入图片描述

6. JSX语法

什么是JSX语法:就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比HTML严谨很多)

  1. 如何启用 jsx 语法?

    • 安装 babel 插件

      • 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
      • 运行cnpm i babel-preset-env babel-preset-stage-0 -D
    • 安装能够识别转换jsx语法的包 babel-preset-react

      • 运行cnpm i babel-preset-react -D
    • 添加 .babelrc 配置文件

      {
        "presets": ["env", "stage-0", "react"],
        "plugins": ["transform-runtime"]
      }
      
    • 添加babel-loader配置项:

      module: { //要打包的第三方模块
          rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
          ]
      }
      

  2. **jsx 语法的本质:**并不是直接把 jsx 渲染到页面上,而是 内部先转换成了 createElement 形式,再渲染的;

  3. 在 jsx 中混合写入 js 表达式:在 jsx 语法中,要把 JS代码写到 { }

    • 渲染数字
    • 渲染字符串
    • 渲染布尔值
    • 为属性绑定值
    • 渲染jsx元素
    • 渲染jsx元素数组
    • 将普通字符串数组,转为jsx数组并渲染到页面上【两种方案】
  4. 在 jsx 中 写注释:推荐使用{ /* 这是注释 */ }

  5. 为 jsx 中的元素添加class类名:需要使用className 来替代 classhtmlFor替换label的for属性

  6. 在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;

  7. 在 jsx 语法中,标签必须 成对出现,如果是单标签,则必须自闭和!

当 编译引擎,在编译JSX代码的时候,如果遇到了<那么就把它当作 HTML代码去编译,如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译;

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读