1、HTML部分
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./style/bootstrap.min.css">
<script src="./react/react.js"></script>
<script src="./react/react-dom.js"></script>
<script src="./babel/browser.js"></script>
<script type="text/babel" src="js/count.js"></script>
</head>
<body>
<div id="app" class="container"></div>
</body>
</html>
```
2、JS部分之ES5写法
```javascript
var Counter = React.createClass({
getDefaultProps(){
console.log('1.getDefaultProps 获取默认属性');
return {name:'计数器'}
},
//获取初始状态
getInitialState(){
console.log('2.getInitialState 获取初始状态');
return {count:this.props.init};
},
//在组件渲染前做一些准备工作
componentWillMount(){
console.log('3.componentWillMount 此组件将要被渲染到目标组件内部');
},
//处理点击事件
handleClick(){
// this 指代的是当前组件的实例
this.setState({count:this.state.count+1});
},
//组件是否应该被更新 传入新的组件对象和状态对象
/**
* 1. 状态只能由自己初始化,自己来改变
* 2. 属性对象由父级初始化,不能由自己来改变,只能由父级来改变
*/
shouldComponentUpdate(newProps,newState){
console.log('5. shouldComponentUpdate 组件是否应该被更新');
if(newState.count<=10){
return true;
}else{
return false;
}
},
componentWillUpdate(){
console.log('6. componentWillUpdate 组件将要被更新');
},
//渲染此组件的方法
render(){
console.log('4.render 挂载 渲染组件');
return (
<div>
<div>{this.state.count}</div>
<button onClick={this.handleClick} >{this.props.name}加1</button>
</div>
)
},
componentDidUpdate(){
console.log('7. componentDidUpdate 组件已经更新完成');
}
});
ReactDOM.render(<Counter init={1}/>,document.getElementById('app'));
```
3、JS部分之ES6写法
```javascript
class Counter extends React.Component {
constructor() {
super(); //super(x, y); 调用父类的constructor(x, y)
this.state = {count: 0};
}
//state = {count: 0};
componentWillMount() {
console.log('3.componentWillMount 此组件将要被渲染到目标组件内部');
}
shouldComponentUpdate(newProps, newState) {
console.log('5. shouldComponentUpdate 组件是否应该被更新');
if (newState.count <= 10) {
return true;
} else {
return false;
}
}
componentWillUpdate() {
console.log('6. componentWillUpdate 组件将要被更新');
}
componentDidUpdate() {
console.log('7. componentDidUpdate 组件已经更新完成');
}
handleClick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div>
<p> {this.state.count}</p>
<button onClick = {this.handleClick.bind(this)}>{this.props.name}加1 </button>
</div>
)
}
}
Counter.defaultProps = { name:"计数器" },
ReactDOM.render( <Counter></Counter>, document.getElementById('app')
)
```
4、ES6继承:Class 可以通过extends关键字继承类的所有属性和方法。
```javascript
class ColorPoint extends Point {
/*constructor(...args) {
super(...args);
}*/
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
//只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
```
上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。子类如果有constructor方法,那么必须在constructor方法中调用super方法,如果不调用super方法,子类就得不到this对象。
如果不需要传参就能获取实例,那么子类就不用定义constructor方法,否则就应该定义 constructor方法,就是说,不管有没有显式定义,任何一个子类都有constructor方法。
ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面。
ES6 的继承,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
来源:http://es6.ruanyifeng.com/#docs/class-extends
附React ES5双向绑定
```javascript
var Input = React.createClass({
getInitialState(){
return {inputValue:'请输入...'};
},
handleChange(event){//2、执行handleChange
this.setState({inputValue:event.target.value+"改变"});//3、获取value值并赋值给状态inputValue
},
render(){
return (
<div>
<input type="text" onChange={this.handleChange} value={this.state.inputValue}/>//1、触发onChange;4、显示inputValue值
<p>{this.state.inputValue}</p>//4、显示inputValue值
</div>
)
}
});
ReactDOM.render(<Input/>,document.querySelector('#app'));
```
Babel:是编写下一代JavaScript的编译器。通过安装插件(plugin)或预设(preset,就是一组设定好的插件)来编译代码的,支持es6和jsx。代码编译工具。
ESlint:提供一个完全可配置的检查规则,提供了许多第三方插件。输出的错误信息也非常明晰,支持es6和jsx。ESLint 这样的可以让程序员在编码的过程中发现问题。代码检查工具。
loaders:用来预处理文件,打包除 JavaScript 之外的任何静态资源。代码加载器。
三、ES6的类和实例
1、在类中定义的方法,是实例的方法,会被实例调用。相当于ES5中实例的原型。
2、在类中定义的方法前,加上static,那么该方法就是静态方法即类本身的方法,通过类名.aaa来调用,方法里面的this指的是类而不是实例,方法不会被实例调用,方法可以被子类继承;
3、在类中定义的属性,是实例的属性,会被实例获取,直接赋值,不需要“var”和“this.”。在ES5中,只能用“this.”写在类的构造函数里面。
4、在类中定义的属性前,加上static,那么该属性就是静态属性即类本身的属性,通过类名.aaa来获取。在ES5中,只能写在类的外部。
来源:http://es6.ruanyifeng.com/#docs/class
来源:https://blog.csdn.net/haoshidai/article/details/52244620
64React组件的ES5和ES6写法
猜你喜欢
转载自blog.csdn.net/bao13716164418/article/details/91975274
今日推荐
周排行