怎么创建react组件

创建react组件有3种方式，分别是无状态函数式组建、es5原生方式、继承React.Component（ES6形式）。

一、无状态函数式组建

无状态函数式组件，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。

无状态函数式组件也是官方比较推荐的一种方式，尽量让底层的组件变成无状态函数式组件，也即组件尽量只用来显示数据，把数据操作的逻辑都放在顶层，然后从顶层把数据传到底层。

举个例子

//顶层代码
import React,{Component} from 'react';  
import ReactDOM from 'react-dom';  
import Button from './component/props'  
  
ReactDOM.render(  
    <div>  
        <Button name="kim"/>  
    </div>  
    ,  
document.getElementById('body')  
)  
//底层代码
import React,{Component} from 'react';  
export default  function Button(props){  
    let {name} = props  
    const sayHi = () => {  
        alert(`Hi ${name}`);  
    }  
    return (  
        <div>  
            <h1>Hello, {name}</h1>  
            <button onClick ={sayHi}>Say Hi</button>  
        </div>  
    )  
}

二、es5原生方式（React.createClass）

React.createClass 是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件

举个例子

const Button = React.createClass({  
    propTypes: {         //②属性类型
        name: React.PropTypes.string
    },
    defaultProps: {     //③属性默认值
        name: ''
    },
    getInitialState: function() {  //①初始状态
        return {
            name: this.props.name|| 'name'
        };
    },
    sayHi() {  
      alert(`Hi ${name}`);  
    }
    render() {
      return (
        <div>  
          <h1>Hello, {name}</h1>  
          <button onClick ={sayHi}>Say Hi</button>  
        </div>
      );
    }
});

三、继承React.Component（ES6形式）

React.Component 是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式。

举个例子

export default class Button extends React.Component {
    static propTypes = {       //②属性类型
        name: React.PropTypes.string
    };
    static defaultProps = {   //③属性默认值
        name: ''
    };
    constructor(props) {
        super(props);
        this.state = { ①初始状态
            name: props.name|| 'name'
        };
        // ES6 类中函数必须手动绑定
        this.sayHi= this.sayHi.bind(this);
    }
    sayHi() {  
      alert(`Hi ${name}`)
    }
    render() {
      return (
        <div>  
          <h1>Hello, {name}</h1>  
          <button onClick ={sayHi}>Say Hi</button>  
        </div>
      );
    }
}