初入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>
)
}