React学习Day01-React基本介绍

以你之姓@ 2022-10-29 15:27 141阅读 0赞

### React基本介绍 ###

*  React 基本介绍
 *   *  React 的特点
     *  React 高效的原因
 *  React 基本使用
 *   *  相关 js 库
 *  React JSX
 *   *  虚拟 DOM
     *  JSX
     *  渲染虚拟DOM
     *  创建虚拟DOM的两种方式
 *  模块与组件以及模块化与组件化的理解

# React 基本介绍 #

## React 的特点 ##

*  声明式开发**Declarative**
 *  组件化编码**Component-Based**
 *  一次学习随处编写 Learn Once,Write Anywhere.支持客户端和服务器的渲染
 *  高效
 *  单向数据流

## React 高效的原因 ##

*  虚拟 DOM,不总是直接操作 DOM
 *  DOM Diff 算法,最小化页面重绘

# React 基本使用 #

## 相关 js 库 ##

*  **react.js:** React 的核心库
 *  **react-dom.js:** 操作 DOM 的 react 扩展库
 *  **babel.js:** 解析 jsx 代码为纯 js 语法代码的库

# React JSX #

## 虚拟 DOM ##

*  React 可以使用 API 来创建一般的 js 对象

const element = React.createElement('h1', { id:'id'}, 'Hello')

*  虚拟DOM对象最终都会被 React 转为真实的 DOM
 *  只需要操作 react 的虚拟 DOM 相关数据,react 会转换为真实 DOM 变化而更新数据

## JSX ##

*  **JSX:** JavaScript XML
    
     *  React定义的一种类似XML的JS扩展语法
     *  **作用:** 用来创建react虚拟DOM对象
        
            const ele = <h1>Chova</h1>
        
         *  这既不是一个字符串,也不是HTML或者XML标签
         *  最终产生的是一个JS对象
     *  **标签名任意:** HTML标签或者其余自定义标签
     *  **标签属性任意:** HTML标签属性或者其余自定义属性
 *  **基本语法规则:**
    
     *  以 < 号开头的,以标签语法解析,html同名标签转换为html同名元素,其余标签需要特别解析
     *  以 \{ 号开头的,以JS语法解析,标签中的JS代码必须使用 \{ \} 包含
 *  **babel.js**的作用:
    
     *  浏览器不能直接解析JSX代码,需要babel转义为纯JS代码才能运行
     *  只要使用JSX,都要在script标签中加上type=“text/babel”,声明需要使用babel来处理

## 渲染虚拟DOM ##

*  **语法:** ReactDOM.render(virtualDOM, containerDOM)
    
     *  参数一**virtualDOM:** 纯js或者jsx创建的虚拟DOM对象
     *  参数二**containerDOM:** 用来包含虚拟DOM元素的真实DOM元素对象
 *  **作用:** 将虚拟DOM渲染到页面中的真实容器DOM中显示

## 创建虚拟DOM的两种方式 ##

*  **纯JS方式:**

React.createElement('h1', { id:'ids'}, msg)

*  **JSX语法:**

const element =  <h1 id={ids}>{msg}</h1>

# 模块与组件以及模块化与组件化的理解 #

*  **模块:**
    
     *  为了解决JS代码更多更复杂的问题
     *  **定义:** 向外提供特定功能的js程序,一般就是js文件
     *  **作用:** 复用js,简化js的编写,提高js的运行效率
 *  **组件:**
    
     *  为了解决一个界面功能更复杂的问题
     *  **定义:** 用来实现局部特定功能的html,css,js代码的集合
     *  **作用:** 复用编码,简化项目编码,提高运行效率
 *  **模块化:**
    
     *  以模块的形式编写js代码,这个应用就是模块化应用
 *  **组件化:**
    
     *  当应用是以多组件的形式实现的,这个应用就是组件化的应用