(十三)ReactNative--- React.creatClass 和React.component的区别

1. 使用React.createClass()的格式，

var ReactiveOne = React.createClass({
    // constructor:function (props) {
    //     // super(props);
    //     coosole.log('constructor');
    // },

    getDefaultProps:function () {
        // console.log(props);
        this.state = {
            sex:'boy',
        };
        console.log('getDefaultProps');
    },
    getInitalState:function () {
        console.log('getInitalState');
        return {
            tab:'message',
            eye:'eye',
            mouth:'mouth'
        };

    },
        componentWillMount:function() {
            this.setState({
                sex:'girls',
                age:16,
                tab:'sdfdk',
                eye:'eyeys',
                mouth:'mouth',
            });
            console.log('componentWillMount');
        },
    render:function () {
        console.log('render');
        console.log('info_Render','sex:'+this.state.sex,'age:'+this.state.age+'tab:'+this.state.tab+'eye:'+this.state.eye+'mouth:'+this.state.mouth);
        return (<View style={{backgroundColor:'white'}}></View>);
    },
    ComponentDidMount:function () {
        console.log('ComponentDidMOunt')
    },

});

2. 使用React.component 创建类

class ReactiveOne  extends Component{
    constructor(props){
      super(props);
        console.log('constructor');
        this.state = {
            sex:'box',
        };
    }
    componentWillMount() {
        this.setState({
            age: '16',
        });
        console.log('componentWillMount');
    }
    componentDidMount() {
        console.log('componentDidMount');
        this.setState({
            sex:'girls',
            age:'20',
        });
    }
    render () {
        console.log('render');
        return (
            <View style={{backgroundColor:'red',width:width,height:height
        }}></View>
        );
    }
    componentWillReceiveProps (nextProps) {

        console.log('conponentWillReceiveProps',nextProps);
    }
    // shouldComponentUpdate() {
    //     console.log('shouldComponentUpdate');
    //     return true;
    // }
    componentWillUpdate() {
        console.log('componentWillUpdate');
    }
    componentDidUpdate () {
        console.log('componentDidUpdate');
    }
}
AppRegistry.registerComponent('ReactiveOne', ()=>ReactiveOne);

以上是ReactNative 创建类的两种的方式

 区别 

1.写法上

   React.createClass的每一个函数和JS中的一样,可以使用一下两种方式

        1. render(){}    正常的函数模式

        2. render:function(){}  别名模式 匿名函数

       3. 每一个函数的最后要加上  逗号“，”

   React.component的每一个和正常的函数写法一样 函数的最后不需要加上逗号“，”

2.The API (via 'extends React.Component') is similar to React.createClass with the exception of getInitialState. Instead of providing a separate getInitialState method, you set up your own state property in the constructor.

初始化函数的区别