React创建组件的三种方式

React创建组件的三种方式

React常见的三种组件创建方式，具体如下：

1. 函数式定义的无状态组件
2. es5原生方式React.createClass定义的组件
3. es6形式的extends React.Component定义的组件

下面我们简单说一下，这三种方式的用法、适用场合以及区别

函数式定义的无状态组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
const NoState = (props) => {
	let{name} = props;
	const sayHi = () => {
		console.log(`Hello ${name}`);
	};
	return (
		<div className="outer no-state-outer">
			<div>我是无状态组件</div>
			<div>props.name--{props.name}</div>
			<button onClick ={sayHi}>Say Hello</button>
	 	</div>
	)
}
NoState.propTypes = {
	name: PropTypes.number
	// name: PropTypes.string
};
export default NoState;

1、组件只有一个render方法实现，没有组件实例化过程，不需要分配多余的内存，性能得到很大提升

2、组件无法访问this对象，只能访问传入的props，所以渲染结果只于传入的props有关

3、无状态组件不需要生命周期管理与状态管理，内部没有相关实现。可以判断传入的类型

总结 较大的组件应该被多个无状态组件分割，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件

有状态组件

写法

1、React.createClass定义的组件

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
const CreateClassCom = React.createClass({ 
	propTypes:{//定义传入props中的属性各种类型
		// name: PropTypes.number
		name: PropTypes.string
    },
    getDefaultProps:function() {
    	return { name: 'init name' } 
    }, 
    getInitialState: function() { 
    	return { name: this.props.name }; 
    }, 
    handleClick: function(event) { 
    	this.setState({ name: 'name 变了' }); 
    }, 
    render: function() { 
    	console.log(this.props,this.state)
	    return ( 
	    <div className="outer">
		    <div>我是CreateClass状态组件</div>
		    <div>props.name--{this.props.name}</div>
		    <div>state.name--{this.state.name}</div>
		    <button onClick ={this.handleClick}>改变name</button>
	    </div>
	    ); 
    } 
});
export default CreateClassCom;

2、extends React.Component定义的组件

import React, { Component } from "react";
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

export default class CompinentCom extends Component {
    constructor(props){
	    super(props)
	    this.state={
	    	name:props.name,
	    }
    }
     
    handleClick (event) { 
    	this.setState({ name: 'name 变了' }); 
    };
    render() { 
	    console.log(this.props,this.state)
	    return ( 
		    <div className="outer">
			    <div>我是Component状态组件</div>
			    <div>props.name--{this.props.name}</div>
			    <div>state.name--{this.state.name}</div>
			    <button onClick ={this.handleClick}>无bind改变name</button>
			    <button onClick ={this.handleClick.bind(this)}>bind改变name</button>
		    </div>
	    ); 
    } 
};

CompinentCom.propTypes = {
	name : PropTypes.number,
}
CompinentCom.defaultProps = {
	xx : 'ssss'
}

区别：

1、createClass自动绑定this，Component需要手动绑定this。createClass会导致不必要的性能开销

2、createClass不可用constructor，用之会报错，默认props，state用getDefaultProps，getInitialState。

Component用constructor(props){super(props)this.state={}}
不可用getDefaultProps，getInitialState用之有warning。

3、react.16之后不可以再用createClass