初入React（一）

React：是2013年Facebook在github上的一个开源js库，它将用户界面抽象为一个个组件，再由开发者将其组合成页面。它不是完整的MVC/MVVM框架，专注于提供清晰、简洁的view层解决方案，尽可能让用户使用原生js开发。其特点是通过生成Virtual Dom(js对象树)提升了应用性能，每当数据更新，则计算对比上次Virtual Don，对发生变化的部分做出批量更新，从而减少了实际的DOM操作。

JSX：React固有的一种语法，允许js与html混用。

需注意：1）所有标签必须闭合

2）类似XML，有且只有一个根标签

3）小写首字母对应DOM元素，大写首字母对应组件元素

4）注释需加上{}

组件：一组可以被公用的功能代码，具有统一的样式布局，可以通过传参展示不同的数据，例如Button组件

React组件基本由以下三个部分组成：属性，状态，生命周期

React组件构成方法：

createClass、ES6 classes、无状态函数

createClass

cont Button =  React.createClass({

getDefaultProps(){

return{

color:'red',

text:'Confirm'

}

},

render() {

const {color, text} = this.props;

return (

<button className={'btn-${color}'}>

<em>{text}</em>

</button>

);

}

)

上述创建方式，当调用Button组件时，会被解析为React.createElement(Button)方法来创建实例

ES6 classes

class Button extends React.Component {

construtor(props){

super(props);

}

static defaultProps ={color：'red',text:'confirm'}

render() {

return(

<button className={'btn btn-${color}'}>

<em>{text}</em>

</button>

)

}

}

无状态函数(只传入props和context两个参数，无state也无生命周期)

function Button ({color='blue',text='confirm'}){

return (

<button className={'btn btn-${color}'}><em>{text}</em></button>

)

}