react基础学习

1、JSX（Javascript XML）

1.1特点：

1. react定义的一种类似于XML的JS扩展语法：js+xml

   • XML早期用于存储和传输数据

     <student>
         <name>TOM</name>
         <age>19</age>
     </student>
     

   • 现在用JSON代替XML

     "{"name":"TOM","age":19}"
     

2. 本质是React。createElement(component,props,…children)方法的语法糖

1.2作用：用来简化创建虚拟DOM

1.3注意事项：

1. 写法：var ele=< h1>Hello JSX!< /h1>
2. 注意1：它不是字符串，也不是HTML/XML标签
3. 注意2：它最终产生的就是一个JS对象
4. 标签名任意：HTML标签或其它标签

1.4语法规则

	   1.定义虚拟DOM时，不要写引号
	   2.标签中混入JS表达式时要用{}
	   3.样式的类名指定不要用class，要用className
	   4.内联样式，要用style={{key:'value'}}的形式去写，遇到多单词key时采用小驼峰式写法
		如：fontSize
	   5.虚拟DOM必须只能有一个根标签
	   6.标签必须闭合
	   7.标签首字母
       			(1).若小写字母开头，则将该标签转为html中同名元素，若html无中该标签对应的同名元素，
				则报错。
				(2).若大写字母开头，React就去渲染对应的组件，若组件中没有定义，则报错。

2、模块与组件、模块化与组件化的理解

2.1模块

1. 概念：向外提供特定功能的js程序，一般就是一个js文件
2. 模块提出背景：随着业务逻辑增加，代码越来越多且复杂
3. 作用：复用js，简化js的编写，提高js运行效率。

2.2组件

1. 概念：用来实现局部功能效果的代码和资源的集合（html、css、js、image等）
2. 背景：可以让一个界面的功能更复杂。
3. 作用：复用编码，简化项目编码，提高运行效率。

2.3模块化

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

2.4组件化

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