很不错的总结
参考地址 https://blog.csdn.net/qq_41846861/article/details/86583212
部分展开如下
jsx
1)全称: JavaScript XML
2)react定义的一种类似于XML的JS扩展语法: XML+JS
3)作用: 用来创建react虚拟DOM(元素)对象
var ele = <h1>Hello JSX!</h1>
注意1: 它不是字符串, 也不是HTML/XML标签
注意2: 它最终产生的就是一个JS对象
4)标签名任意: HTML标签或其它标签
5)标签属性任意: HTML标签属性或其它
6)基本语法规则
a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b.遇到以{ 开头的代码,以JS 语法解析: 标签中的js代码必须用{ }包含
7)babel.js的作用
a.浏览器不能直接解析JSX代码, 需要babel 转译为纯JS的代码才能运行
b.只要用了JSX,都要加上type="text/babel" , 声明需要babel来处理
虚拟DOM,React高效原因,渲染虚拟DOM(元素),模块与组件和模块化与组件化的理解
React面向组件编程
组件化编写功能的流程
1.拆分组件
2.实现静态组件(只有静态界面,无动态数据和交互)
3.实现动态组件
1)实现初始化数据动态显示
2) 实现交互功能