React Native 创建组件的三种方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gzx110304/article/details/80057663

React Native 创建组件的三种方式

1.以Es6形式创建组件

    export class ComponentByEs6 extends Component {

        render() {
            return (<View 
                        style={ 
                            {
                                flex:1, 
                                backgroundColor:'#ff0000', 
                                alignItems:'center', 
                                justifyContent:'center'
                            } 
                        }>
                        <Text>
                            ComponentByEs6 
                        </Text>
                    </View>);
        }

    }

1.1.Es6创建的组件具有如下特性

1. Es6创建的组件,其成员函数不会自动邦定this,也就是说,如果我们不手动为成员函数绑定this,我们在成员函数内部拿到的this引用并没有指向当前的组件类

   export class ComponentByEs6 extends Component {
   
       onTextClick() {
           console.info(this instanceof ComponentByEs6);//输出false
       }
   
       render() {
           return (<View 
                   ...
                   }>
                       <Text onPress={ this.onTextClick }>
                           ComponentByEs6 
                       </Text>
                   </View>);
       }
   
   }

   Es6创建的组件有三种方法可以为成员函数绑定this：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定

   //在构造函数中绑定
   constructor(props) {
      super(props);
      this.onTextClick=this.onTextClick.bind(this);
   }
   <Text onPress={ this.onTextClick }>
      ComponentByEs6 
   </Text>
   
   //调用时绑定
   <Text onPress={ this.onTextClick.bind(this) }>
      ComponentByEs6 
   </Text>
   
   //箭头函数绑定
   <Text onPress={ () => this.onTextClick() }>
      ComponentByEs6 
   </Text>

   当手动为其成员函数绑定this后,函数中的

   console.info(this instanceof ComponentByEs6);

   将输出true

2. 配置组件属性类型propTypes及其默认props属性defaultProps
   Es6创建的组件,在配置propTypes及其defaultProps时,应作为组件类的属性来配置,也就是类的静态属性来配置

   /**
    * 注意:React.PropTypes从0.48开始被删除,可以使用
    *     prop-types包中的PropTypes替代
    */
   export class ComponentByEs6 extends Component {
   
       static propTypes = {
           text: PropTypes.string
       };
   
       static defaultProps = {
           text: ''
       };
   
       ...
   
   }

3. 配置组件的初始状态state
   Es6创建的组件,其初始状态state是作为组件的属性,在组件的constructor方法中进行配置的

   export class ComponentByEs6 extends Component {
   
       ...
   
       constructor(props) {
           super(props);
           this.state = {
               count: 0
           };
       }
   
       ...
   }

2.以Es5的形式创建组件

/**
 * Es5方式创建组件
 * 注意:React.createClass从0.48开始被删除,可以使用
 *     create-react-class 包中的 createReactClass 方法替代
 */
export const ComponentByEs5 = createReactClass({
    render: function() {
        return (<View 
                    style={ 
                        {
                            flex:1, 
                            backgroundColor:'#ff0000', 
                            alignItems:'center', 
                            justifyContent:'center'
                        } 
                    }>
                    <Text>
                        ComponentByEs5
                    </Text>
                </View>);
    }
});

2.1.Es5创建的组件具有如下特性

1. Es5创建的组件,其成员函数会自动绑定this,也就是说,在任何时候,我们通过this拿到的对象,都是指向当前的组件类的

   export const ComponentByEs5 = createReactClass({
       render: function() {
           return (<View 
                       style={ 
                           {
                               flex:1, 
                               backgroundColor:'#ff0000', 
                               alignItems:'center', 
                               justifyContent:'center'
                           } 
                       }>
                       <Text onPress = {
                           this.onTextClick
                       }>
                           ComponentByEs5
                       </Text>
                   </View>);
       },
   
       onTextClick: function() {
           console.info(this instanceof ComponentByEs5);//输出true
       }
   });

2. 配置组件属性类型propTypes及其默认props属性defaultProps
   Es5创建的组件,其propTypes及其默认props属性defaultProps会作为组件实例的属性来进行配置,其中defaultProps是通过组件的getDefaultProps方法来获取的

   export const ComponentByEs5 = createReactClass({
   
       propTypes: {
           text: PropTypes.string,
       },
   
       getDefaultProps: function() {
           return {
               text:''
           };
       },
   
       ...
   });

3. 配置组件的初始状态state
   Es5创建的组件,其初始状态state是通过getInitialState方法来进行配置的

   export const ComponentByEs5 = createReactClass({
   
       ...
   
       getInitialState: function () { 
           return {
               count:0
           };
        },
   
       ...
   });

3.通过函数创建组件

export function FunctionComponent() {
    return (
        <View 
            style={ 
                {
                    flex:1, 
                    backgroundColor:'#ff0000', 
                    alignItems:'center', 
                    justifyContent:'center'
                } 
            }>
            <Text>
                FunctionComponent
            </Text>
        </View>
    );
}

3.1.通过函数创建的组件具有如下特性

1. 组件不会被实例化,整体渲染性能得到提升
2. 组件不能访问this对象
3. 组件无法访问生命周期的方法
4. 组件只能访问输入的props