简介
React 使用称为 JSX(JavaScript 和 XML)的 HTML-in-JavaScript 语法。用于动态构建用户界面的JavaScript库(只关注于视图)
特点
- 声明式编码
- 组件化编码
- React Native编写原生应用
- 高效(优秀的Diffing算法),最小化页面重绘
- 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
真实DOM与虚假DOM
- React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement('xx',{id:'xx'},'xx')
- 虚拟DOM对象最终都会被React转换为真实的DOM
- 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
JSX
全称: JavaScript XML,react定义的一种类似于XML的JS扩展语法: JS + XML本质是**React.createElement(component, props, ...children)** 方法的语法糖。
JSX是js内定义的一套XML语法,可以解析出目标js代码,颠覆传统js写法。实质上HTML也是xml协议,有由浏览器解析,而JSX是由js解析。当然也可以通过构建工具先解析生成,如webpack(使用babel-loader),这样可以减少代码这行中js解析JSX的时间。JSX原本是使用reactjs官方自己提供的方法处理。ReactJS和React Native已经全部采用第三方Babel的JSX编译器实现。
模块
理解:向外提供特定功能的js程序, 一般就是一个js文件,随着业务逻辑增加,代码越来越多且复杂。
作用:复用js, 简化js的编写, 提高js运行效率。
组件
理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)。
作用:复用编码, 简化项目编码, 提高运行效率
- 组件从创建到死亡它会经历一些特定的阶段。
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。
模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用