react基础

理论知识在本博客开始就有介绍，这里不再重复。本篇主要从react结构写法，css修饰以及简单的逻辑事件操作来学习react。

react框架自13年5月份提出来，发展的主要有15版跟16版，两个版本差异还是蛮大的。react15,低版支持高版；而react16,高版拒绝低版。主要原因还是react更多的遵循原生js的语法，15版的话，封装了很多函数之类的，可以直接来用，支持高版。而高版更接近原生js的写法，在低版里面有的是不支持的。

第一，写react基本结构，首先就要引入文件

•             react.min.js--------包含了组件构建以及核心diff算法
•             react-dom.min.js----将虚拟dom渲染真实dom
•             browser.min.js------jsx语法的翻译器

以上是低版的引入，高版的话是react.production.min.js、react-dom.production.min.js和browser.min.js三个文件，作用同上。

第二步就是敲代码了，上代码

以上是react15版本的写法，主要就三步，创建组件，渲染到容器，修改script脚本解析的是babel语言。下面是react16版本的写法，也类似，知识16版遗弃了React.createClass这种写法。

第三，以高版为例，来写入一些css样式

• 内部样式的css

	
		
		
		
		
		
		
	
	
		

		

		
		
		
我是红色的
		
我是蓝色的
		
我是黄色的
	
	

高版里面的class内部样式还是生效的，但是在低版里面class是不生效的，需要改成className

• 行间样式的写法

低版写法也就这三种，跟高版是一样的。

注意：

• reactjs 行内       样式均是以json形式存在{color：'red'},react将变量嵌套jsx中，style={变量名称}
• html的转义

React 会将所有要显示到 DOM 的字符串转义，防止 XSS。

后台传过来的数据带页面标签的是不能直接转义的，具体转义的写法如下：

var content='content';  

React.render(

   

dangerouslySetInnerHTML={{__html: content}}>

,

• 在jsx中写逻辑   --要写在render和return之间

• jsx中注释标签的方法          {/**标签**/}    或者{/*标签*/}

• 组件嵌套       不能多个节点渲染，否则最后一个组件覆盖前面的

第四，事件机制