React学习
2024-11-19 12:54:36
React入门
2515

1.1.React的基本认识

1.1.1.官网

  1. 英文官网: https://reactjs.org/
  2. 中文官网: https://doc.react-china.org/

1.1.2.介绍描述

  1. 用于构建用户界面的 JavaScript 库(只关注于View)
  2. 由Facebook开源

1.1.3.React的特点

  1. Declarative(声明式编码)
  2. Component-Based(组件化编码)
  3. Learn Once, Write Anywhere(支持客户端与服务器渲染)
  4. 高效
  5. 单向数据流

1.1.4.React高效的原因

  1. 虚拟(virtual)DOM, 不总是直接操作DOM
  2. DOM Diff算法, 最小化页面重绘

1.2.React的基本使用

  1. react.js: React的核心库
  2. react-dom.js: 提供操作DOM的react扩展库
  3. babel.min.js: 解析JSX语法代码转为纯JS语法代码的库（babel被收购之后新加入了jsx语法）

在页面中导入js

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

1.3.React JSX

1.3.1.虚拟DOM

  1. React提供了一些API来创建一种 `特别` 的一般js对象
  2. 虚拟DOM对象最终都会被React转换为真实的DOM
  3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

1.3.2.JSX

  • 全称: JavaScript XML
  • react定义的一种类似于XML的JS扩展语法: XML+JS
  • 作用: 用来创建react虚拟DOM(元素)对象
  1. var ele = <h1>Hello JSX!</h1>
  2. 注意1: 它不是字符串, 也不是HTML/XML标签
  3. 注意2: 它最终产生的就是一个JS对象
  • 标签名任意: HTML标签或其它标签
  • 标签属性任意: HTML标签属性或其它
  • 基本语法规则
  1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
  2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
  • babel.js的作用
  1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
  2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

1.3.3.渲染虚拟DOM(元素)

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

1.3.4.建虚拟DOM的2种方式

纯JS(一般不用)

React.createElement('h1', {id:'myTitle'}, title)

JSX:

<h1 id='myTitle'>{title}</h1>

1.4.模块与组件和模块化与组件化的理解

1.4.1.模块

  • 理解: 向外提供特定功能的js程序, 一般就是一个js文件
  • 为什么: js代码更多更复杂
  • 作用: 复用js, 简化js的编写, 提高js运行效率

1.4.2.组件

  • 理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
  • 为什么: 一个界面的功能更复杂
  • 作用: 复用编码, 简化项目编码, 提高运行效率

1.4.3.模块化

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

1.4.4.组件化

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

最新文章