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

来源：互联网发布：手机拍照后期制作软件编辑：程序博客网时间：2024/04/26 07:25

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.

初始化函数的区别

0 0