React学习记录（一）

笔记摘自网易云课堂 - Leo老师

三大框架的比较

• angular

  • 1.x版本 MVC
  • 2.x 版本 MVVM
  • 框架高度封装

• vue

  • mvvm框架
  • 不限制交互
  • 推荐
    vue-resource
    axios
    xmlhttp //ajax原生

• react

  • 更专注于view层

React的优势

• 虚拟DOM
• 性能性很高
• 解决一些终端的问题（pc、移动端问题）

---

JSX语法

• 与JS的对比

  //js - string
  let a = '
  hello react!
  ' 
  

  //jsx
  let a = <div>hello react!</div> 
  

• 书写格式 ：
  单个标签的书写格式

    let a = <div>hello react!</div>
  

• 多个标签的书写格式 - 外面必须包一层根元素
  //vue2.x 组件 根元素 （借鉴react）

    let a = <div><div>sadasd</div><span>asdasd</span></div>		  
  

• 可以自由缩进 //特性

  // An highlighted block
  let a = <div>
  				<div>sadasd</div>
  				<span>asdasd</span>
  			</div>
  	//允许加括号
  let a = (<div>
  			<div>sadasd</div>
  			<span>asdasd</span>
  		</div>)
  

• 单标签规则 - 必须闭合

  	<img/>
  	<input/>
  	<br/>
  	<div></div>
  

• class - className

    	<div className='aaa'></div>
  

• jsx里面使用js代码 {}

  	var a = 'hello react!'; //模板
  	let b = <div>{a}</div>
  

React开发模式

• 直接引入 - 简单（初学者喜欢的模式） cdn引入

    // An highlighted block
    <script type="text/javascript" src="bower_components/react/react.js"></script>
    <script type="text/javascript" src="bower_components/react/react-dom.js"></script>
    <script type="text/javascript" src="bower_components/babel/browser.js"></script>
  

  需要引入三个文件，且必须先引入 react.js 再引入 react-dom.js