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 
Hello {props.name}
}
ReactDOM.render(, mountNode)

const About = () =>{return（
    

    
About
  
）}
//简化如下
const About = () => (
  

    
About
  
)

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

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

var Hello = React.createClass({
    render(){
        return(
                

                    33333333333
                
        )
    }
})

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

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

class Hello extends React.Component{
    render(){
        return(
            

                22222
                
                click
                {
                    console.log(this.refs.username)
                }}>clicktwo
            
        )
    }
    handleClick(){
        console.log(444444444);
        console.log(this.refs.username)
    }
}