React入门

第1章：React入门

一、React简介

1. 官网

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

2. 介绍描述

• 用于动态构建用户界面的 JavaScript 库(只关注于视图)
• 由Facebook开源

3. React的特点

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

4. React高效的原因

• 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
• DOM Diffing算法, 最小化页面重绘。

二、React的基本使用

1. 效果

2. 相关js库

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

注意：引入顺序和以上保持一致

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

• 纯JS方式(一般不用)

  // 1. 创建虚拟DOM  (js方式)
  const VDOM = React.createElement(
      "h1",
       { id: "title" },
       React.createElement("span", {}, "Hello,React!")
  );
  

• JSX方式

  // 1. 创建虚拟DOM  (Jsx方式)//此处一定不要加引号，因为不是字符串
  const VDOM = (
      <h1>
           <span>Hello,React!</span>
      </h1>
  );
  

4. 虚拟DOM与真实DOM

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

  • const VDOM = React.createElement('xx',{id:'xx'},'xx')
    

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

• 虚拟DOM对象最终都会被React转换为真实的DOM

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

三、React JSX

1. 效果

2. JSX

• 全称: JavaScript XML

• react定义的一种类似于XML的JS扩展语法: JS + XML本质是

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

• 作用: 用来简化创建虚拟DOM

  • 写法：var ele = <h1>Hello JSX!</h1>
  • 注意1：它不是字符串, 也不是HTML/XML标签
  • 注意2：它最终产生的就是一个JS对象

• 标签名任意: HTML标签或其它标签

• 标签属性任意: HTML标签属性或其它

• 基本语法规则

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

• babel.js的作用

  • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

  • 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

3. 渲染虚拟DOM(元素)

• 语法:

  ReactDOM.render(virtualDOM, containerDOM)
  

• 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

• 参数说明

  • 参数一: 纯js或jsx创建的虚拟dom对象
  • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

4. JSX练习

需求: 动态展示如下列表

代码：

/*
一定注意区分：【js语句(代码)】与【js表达式】
    1.表达式：一个js表达式会产生一个值，可以放在任何需要值的地方
        下面这些都是表达式
            (1).a
            (2).a+b
            (3).demo(1)
            (4).arr.map()
            (5).function test(){}
    2.语句(代码)
        下面这些都是语句
            (1).if(){}
            (2).for(){}
            (3).switch(){case:xxx}
*/
// 模拟数据
const data = ["Angular", "React", "Vue"];
const obj = { name1: "Angular", name2: "React", name3: "Vue" };
// 1. 创建虚拟DOM  (Jsx方式)//此处一定不要加引号，因为不是字符串
const VDOM = (
  <div>
    <h1>前端js框架列表</h1>
    <ul>
      {data.map((i, index) => {
        return <li key={index}>{i}</li>;
      })}
    </ul>
  </div>
);
// 2. 渲染虚拟DOM到页面// ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM, document.getElementById("test"));

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

1. 模块

• 理解：向外提供特定功能的js程序, 一般就是一个js文件

• 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

• 作用：复用js, 简化js的编写, 提高js运行效率

2. 组件

• 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

• 为什么要用组件： 一个界面的功能更复杂

• 作用：复用编码, 简化项目编码, 提高运行效率

3. 模块化

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

4. 组件化

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