64React组件的ES5和ES6写法

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写法

猜你喜欢
