react

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(){}  组件属性更新之前