1.1. React 简介

1.1.1. 官网

  1. 英文官网: https://reactjs.org/
  2. 中文官网: https://react.docschina.org/

1.1.2 介绍描述

  1. 用于动态构建用户界面的JavaScript库（只关注于视图）
  2. 由FaceBook开源

1.1.3 React 的特点

  1. 声明式编码
  2. 组件化编码
  3. React Native 编写原生应用
  4. 高效（优秀的Diffing算法）

1.1.4 React 高效的原因

  1. 使用虚拟（Virtual） DOM，不总是直接操作页面真实DOM。
  2. DOM Diffing 算法，最小化页面重绘。

1.2 React的基本使用

1.2.1 效果

image.png

1.2.2 相关JS库

  1. react.js ： React 核心库
  2. react-dom.js ： 提供操作DOM的react 扩展库
  3. babel.min.js ： 解析JSX语法代码转为js代码的库

1.2.3. 创建虚拟DOM的两种方式

image.png

  1. 纯JS方式（一般不用）
  2. JSX 方式

1.2.4 虚拟DOM 与 真实DOM

  1. React提供了一些API来创建一种 “特别”的一般js对象 

    1. ReactDOM.render(VDOM,document.getElementById("test"))

    上面创建的就是一个简单的虚拟DOM对象。

  2. 虚拟DOM对象最终被React转换为真实的DOM

  3. 我们编码时基本只需要操作 react 的虚拟DOM相关数据，react 会转换为真实DOM变化而更新界。

1.3 React JSX

1.3.1. 效果

image.png

1.3.2 JSX

  1. 全称： JavaScript XML

  2. react 定义的一种类似于XML的JS扩展语法 ： JS + XML 本质是

    1. React.createElement(component, props, ...children)  方法的语法糖

  3. 作用： 用来简化创建虚拟DOM

    1. 写法： 
      1. var  ele = <h1> Hello JSX ！ </h1>
      b. 注意1 ： 它不是字符串，也不是 HMTL/XML 标签
      c. 注意2 ： 它最终产生的就是一个JS对象

  4. 标签名任意 ： HTML 标签或其它标签

  5. 标签属性任意： HTML 标签属性或其它
  6. 基本语法规则

a. 遇到 <开头的代码，以标签的语法解析： html 同名标签转换为html同名元素，其它标签需要特别解析。
b. 遇到以 {开头的代码，以JS语法解析： 标签中的js表达式必须用{} 包含

  1. babel.js 的作用
    1. 浏览器不能直接解析 jsx 代码，需要 babel 转译为纯 JS 的代码才能运行。
    2. 只要用了 JSX ，都要加上 type = “text/bable” ，声明需要 bable 来处理。

1.3.3 渲染虚拟DOM （元素）

  1. 语法： ReactDOM.render(virtualDOM, containerDOM)
  2. 作用: 将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示
  3. 参数说明：
    1. 参数一： 纯 js 或 jsx 创建的虚拟 dom 对象
    2. 参数二: 用来包含虚拟 DOM 元素的真实 DOM 元素对象（ 一般是一个 div）

      1.3.4 JSX 小练习

需求： 动态展示如下列表
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jsx的小练习</title>
  6. </head>
  7. <body>
  8. <!--    准备好一个容器-->
  9. <div id="test"></div>
  11. <!--    引入react核心库-->
  12. <script type="text/javascript" src="../js/react.development.js"></script>
  13. <!--引入react-dom  用于支持react操作dom-->
  14. <script type="text/javascript" src="../js/react-dom.development.js"></script>
  15. <!--引入babel，用于对jsx转为js-->
  16. <script type="text/javascript" src="../js/babel.min.js"></script>
  19. <script type="text/babel">
  22.     /*
  23.     一定注意区分：【js语句(代码)】与【js表达式】
  24.             1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  25.                 下面这些都是表达式：
  26.                     (1). a
  27.                     (2). a+b
  28.                     (3). demo(1)
  29.                     (4). arr.map()
  30.                     (5). function test () {}
  31.           2.语句(代码)：
  32.             下面这些都是语句(代码)：
  33.                 (1).if(){}
  34.                 (2).for(){}
  35.                 (3).switch(){case:xxxx}
  37.     */
  40.     //模拟一些数据
  41.     const data = ['Angular', 'React', 'Vue']
  43.     //1.创建虚拟DOM
  44.     const VDOM = (
  45.         <div>
  46.             <h1>前端js框架列表</h1>
  48.             <ul>
  49.                 {
  50.                     data.map((item, index) => {
  51.                         return <li key={index}>{item}</li>
  52.                     })
  53.                 }
  54.             </ul>
  55.         </div>
  56.     )
  58.     //2.渲染虚拟DOM到页面
  59.     ReactDOM.render(VDOM, document.getElementById('test'))
  61. </script>
  62. </body>
  63. </html>

1.4 模块与组件、模块化与组件化的理解

1.4.1 模块

  1. 理解 ：向外提供特定功能的 JS 程序，一般就是一个 js 文件。
  2. 为什么要拆成模块： 随着业务逻辑增加，代码越来越多且复杂。
  3. 作用： 复用js ，简化 js 的编写，提高 js 运行效率。

1.4.2 组件

  1. 理解： 用来实现局部功能效果的代码和资源的集合（html/css/js/image 等等）
  2. 为什么要用组件： 一个界面的功能更复杂
  3. 作用： 复用编码，简化项目编码，提高运行效率。

1.4.3 模块化

当应用的 js 都以模块来编写的，这个应用就是一个模块化的应用。

1.4.4 组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用。

image.png