react
没有最好的框架，只有最合适的框架
angular1
vue
angular1和react
复杂度 react比anguar学习曲线再陡一些
灵活
模块化
轻便度 react要比angular轻便
性能 react的性能很高
angualr的特点
指令
数据双向绑定
vue 和react
轻便程度 差不多
学习曲线
性能
组件化
虚拟的dom
react的特点
组件化
虚拟的dom
生态圈丰富
创建一个组件
class Header extends React.Component{
constructor(...args){//只要要用事件一定要写
super(...args)
}
render(){
return
}
}
注：1、React.Component是在引入完react.js后就有的
2、return后的东西要用根标签包裹
3、建议用括号包起来
4、组件名一定要大写
属性和状态
属性
定义 属性名="属性值"
使用{this.props.属性}
状态
定义
在constructor里面
this.state={
....
}
使用：
{this.state.XXX}
修改
this.setState({XXX:XXX})
属性是死的，状态的可以改变的
子组件的使用
{this.props.children}
注：this.props.children返回的结果有三种
1、undefined 没有子级
2、object 单个子级
2、array 多个子级
事件
事件的添加
{this.函数名.bind(this)}
事件的定义
事件名(){
...
}
需要注意的是
如果需要事件，必须继承父类
constructor(...args){
super(...args)
}
样式
class -->className
style={{fontSize:'20px',...}}
注：第一个{}是模板，里面的{}是对象
自定义函数
函数名(){
...
}
this.函数名
声明周期：
componentWillMount(){} 组件创建之前
componentDidMount(){} 组件创建之后
componentWillUpdate(){} 组件更新之前
componentDidUpdate(){} 组件更新之后
componentWillUnmount(){} 组件消亡之前
没有组件消亡之后
componentWillReceiveProps(){} 组件属性更新之前
