React组件的定义方式

定义组件的时候，一开始就得导入react，不然会引起如下错误：

React must be in scope when using JSX

这是因为JSX最终会被转译成为依赖于React的表达式

一. React创建组件有三种方式

1.无状态组件

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

官方对其声明如下：

在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。

1.组件不会被实例化，整体渲染性能得到提升
因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
2.组件不能访问this对象
无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件
3.组件无法访问生命周期的方法
因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
4.无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

2.React.createClass

这种创建方式在现在已经被淘汰，所以不做过多介绍

3.React.Component

class App extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
        value:0
    }
  render() {
    return (
      <div></div>
    );
  }

补充：

image.png