这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战

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代码,这个应用就是模块化应用
• 组件化:
  • 当应用是以多组件的形式实现的,这个应用就是组件化的应用