react定义组件的方法有哪些？区别是什么？
1.函数式无状态组件
2.es5方式React.createClass组件
3.es6方式extends React.Component
区别:
无状态组件无法进行数据的操作 es5的它是利用function模拟class的写法做出来的es6 是通过es6新增class的属性创建的组件此组件创建简单
1.函数式无状态组件
语法:
function HelloComponent(props){
return <div> Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)
2.es5方式React.createClass组件
语法:
var InputControlES5 = React.createClass({
propTypes: {//定义传入props中的属性各种类型
initialValue: React.PropTypes.string
},
defaultProps: { //组件默认的props对象
initialValue: " "
},
// 设置 initial state
getInitialState: function(){//组件相关的状态对象
return {
text: this.props.initialValue || 'placeholder'
};
},
handleChange: function(event){
this.setState({ //this represents react component instance
text: event.target.value
});
},
render: function(){
return (
<div>
Type something:
<input onChange={this.handleChange} value={this.state.text} />
</div>
);
}
});
InputControlES6.propTypes = {
initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
initialValue: ''
};
3.es6方式extends React.Component
class InputControlES6 extends React.Component{
constructor(props) {
super(props);
// 设置 initial state
this.state = {
text: props.initialValue || 'placeholder'
};
// ES6 类中函数必须手动绑定
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
text: event.target.value
});
}
render() {
return (
<div>
Type something:
<input onChange={this.handleChange} value={this.state.text} />
</div>
);
}
}
InputControlES6.propTypes = {
initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
initialValue: " "
};
区别:
无状态组件无法进行数据的操作 es5的它是利用function模拟class的写法做出来的es6 是通过es6新增class的属性创建的组件此组件创建简单
参考网址:https://www.cnblogs.com/wonyun/p/5930333.html
1、如何提高网页性能？
文件路径:http://bbs.daxiangclass.com/?thread-7.htm
demo:https://www.jianshu.com/p/ae7e66ff1cb5
2、react定义组件的方法有哪些？区别是什么？
文件路径:http://bbs.daxiangclass.com/?thread-81.htm
demo:https://www.jianshu.com/p/7c3d17971dfb
3、canvas与svg的区别？
文件路径:http://bbs.daxiangclass.com/?thread-280.htm
demo:https://www.jianshu.com/p/26dd0c9769b3
4、jquery的优点？
文件路径:http://bbs.daxiangclass.com/?thread-10.htm
demo:https://www.jianshu.com/p/1667d2c20cf5
5、小组demo
1). 利用sort将字母排序
demo:https://codepen.io/nian1016/pen/jpejKd?editors=1111
2).快速排序 递归
demo:https://codepen.io/nian1016/pen/MBPMxg?editors=1111
