52_RN笔记10_自定义组件在ES5和ES6的区别

一，ES6自定义组件的一般写法

//1，导入资源
import React, { Component } from 'react';
import { Text, View } from 'react-native';
 
//2，自定义组件
class Greeting extends Component {
  render() {
    return (
        <Text>Hello {this.props.name}!</Text>
    );
  }
}
 
//3，引入组件，并导出
export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{flex:1,alignItems: 'center',justifyContent: "center"}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
        {/* <Greeting name={true} /> */}
      </View>
    );
  }
}

二，导入资源的区别

// ES5：用require
var React = require("react-native");
var {
     Image,
     Text,
     ProTypes
} = React; 
 

// ES6：用import
import React, {
   Image,
   Text,
   ProTypes
} from 'react-native';

三，组件引用的区别

// ES5
var MyComponent = require('./MyComponent.js');

 
// ES6
import MyComponent from './MyComponent';

四，定义组件的区别

// ES5：使用createClass
var Phono = React.createClass({
    render:function(){
       return (
       <Image source = {this.props.source}/>
    );
  },
});
 
// ES6：使用extends component
class Photo extends React.Component {
  render(){
      return (
      <Image source = {this.props.source}/>
     );
}

五，定义组件的方法的区别

// ES5
var Photo = React.createClass({
     componentWillMount:function(){
     
     },
     render:function(){
         return(
             <Image source = {this.props.source}/>
          );
      }，
});
 
 
// ES6：省略function，方法结束用分号，代替原来的逗号
class Photo extends React.Component {
   componentWillMount(){
}
  render(){
     reurn (
     <Image source = {this.props.source}/>
   );
}
}

六，组件输出类给外部使用区别

// ES5：通过module.experts
var Mycomponent = React.createClass({
  .....
});
module.exports = MyComponent;
 
// ES6,通常用export default来实现相同的功能
export default class MyComponent extends React.Component{
 ...

七，自定义组件属性类型和默认属性的区别

//ES5 ：属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现
var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            <View />
        );
    },
});

//ES6：可以统一使用static成员来实现
class Video extends React.Component {
    static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };  // 注意这里有分号
    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };  // 注意这里有分号
    render() {
        return (
            <View />
        );
    } // 注意这里既没有分号也没有逗号
}

八，初始化state的区别

//ES5 ：使用getInitialState
var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

//ES6：写法1
class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}
 
 
//ES6：写法2：推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：
class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

九，把方法作为回调的区别

//ES5：React.createClass会把所有的方法都bind一遍，
        这样可以提交到任意的地方作为回调函数，而this不会变化
var PostInfo = React.createClass({
    handleOptionsButtonClick: function(e) {
        this.setState({showOptionsModal: true});
    },
    render: function(){
        return (
            <TouchableHighlight onPress={this.handleOptionsButtonClick}>
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
});

//ES6：通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用
class PostInfo extends React.Component
{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                onPress={this.handleOptionsButtonClick.bind(this)}
                onPress={e=>this.handleOptionsButtonClick(e)}
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
}

十，给类添加新的方法

//ES5:使用mixin来为我们的类添加一些新的方法，譬如PureRenderMixin
var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],
 
  render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});

//ES6:用一个 ”增强函数“，来给某个类增加一些方法，并且返回一个新类
//Enhance.js
import { Component } from "React";
 
export var Enhance = ComposedComponent => class extends Component {
    constructor() {
        this.state = { data: null };
    }
    componentDidMount() {
        this.setState({ data: 'Hello' });
    }
    render() {
        return <ComposedComponent {...this.props} data={this.state.data} />;
    }
};

//HigherOrderComponent.js
import { Enhance } from "./Enhance";
 
class MyComponent {
    render() {
        if (!this.data) return <div>Waiting...</div>;
        return <div>{this.data}</div>;
    }
}
 
export default Enhance(MyComponent); // Enhanced component