[尚硅谷React笔记]——第1章 React简介

目录：

 第1章 React简介

• React的基本使用:
• 虚拟DOM的两种创建方式：
  • 使用jsx创建虚拟DOM
  • 使用js创建虚拟DOM(一般不用)
  • 虚拟DOM与真实DOM:
• React JSX:
• JSX练习：
• 模块与组件、模块化与组件化的理解
  • 模块
  • 组件
  • 模块化
  • 组件化

 

 第1章 React简介

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

React的基本使用:

代码示例：

运行结果：

虚拟DOM的两种创建方式：

• 使用jsx创建虚拟DOM

• 使用js创建虚拟DOM(一般不用)

• 虚拟DOM与真实DOM:

React JSX:

• 全称:  JavaScript XML
• react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
• 作用: 用来简化创建虚拟DOM
  • 写法：var ele = 

    Hello JSX!

  • 注意1：它不是字符串, 也不是HTML/XML标签
  • 注意2：它最终产生的就是一个JS对象
• 标签名任意: HTML标签或其它标签
• 标签属性任意: HTML标签属性或其它
• 基本语法规则
  • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
  • 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
• babel.js的作用
  • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
  • 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

jsx语法规则：

JSX练习：

运行结果：

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

模块

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

组件

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

模块化

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

组件化

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