React教程 第1章：React入门

16 min read

React入门

React简介

官网 1.英文官网: https://reactjs.org/

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

介绍描述

1.用于动态构建用户界面的 JavaScript 库(只关注于视图)

2.由Facebook开源

React的特点

  1. 声明式编码

  2. 组件化编码

  3. React Native 编写原生应用

  4. 高效（优秀的Diffing算法）

React高效的原因

  1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

  2. DOM Diffing算法, 最小化页面重绘。

虚拟DOM与真实DOM

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

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

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

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

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

JSX

  1. 全称: JavaScript XML

  2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖

  3. 作用: 用来简化创建虚拟DOM

  • 写法：var ele = <h1>Hello JSX!</h1>

  • 注意1：它不是字符串, 也不是HTML/XML标签

  • 注意2：它最终产生的就是一个JS对象

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

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

  1. 基本语法规则

  • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

  • 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

  1. babel.js的作用

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

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

  1. 渲染虚拟DOM(元素)

  • 语法: ReactDOM.render(virtualDOM, containerDOM)

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

  1. 参数说明

  • 参数一: 纯js或jsx创建的虚拟dom对象

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