react组件创建的3种（两类）方式

参考链接

1.参考链接1

React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：

1）函数式定义的无状态组件（无状态）---- 适合配路由

无状态组件即是纯展示组件，只负责根据传入的props来展示，不涉及到state状态的操作，是一个只带有一个render方法的组件类。

本质上就是一个function,里面只有return,参数只有props,没有state,

特点：
1）只负责显示没有逻辑
2）组件不会被实例化，整体渲染性能得到提升
3）组件不能访问this对象
4）组件无法访问生命周期的方法
5）无状态组件只能访问输入的props,同样的props会得到同样的渲染结果，不会有副作用
eg:

function HelloComponent(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="yourName" />, mountNode)

const About = () =>{return（
    <div>
    <h2>About</h2>
  </div>
）}
//简化如下
const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

2）es5原生方式React.createClass定义的组件（有状态）---- 适合绑事件

var React = require("react");
var ReactDOM = require("react-dom");

var Hello = React.createClass({
    render(){
        return(
                <div>
                    33333333333
                </div>
        )
    }
})

3）es6形式的extends React.Component定义的组件（有状态）--- 适合绑事件

import React from "react";
import ReactDOM  from "react-dom";

class Hello extends React.Component{
    render(){
        return(
            <div>
                22222
                <input text="text" ref="username"/>
                <button onClick={this.handleClick.bind(this)}>click</button>
                <button onClick={()=>{
                    console.log(this.refs.username)
                }}>clicktwo</button>
            </div>
        )
    }
    handleClick(){
        console.log(444444444);
        console.log(this.refs.username)
    }
}