React 组件

React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state) 和 生命周期函数

1、创建函数组件

function Hello(){
  return <div>这是一个函数组件</div>
}

function App() {
  return (
    <div className="App">
      <Hello />
    </div >
  );
}

函数组件注意点：

 1、组件名称首字母必须大写

 2、函数组件必须有返回值，如果不需要渲染内容返回null

 3、组件可以像HTML标签一样渲染到页面

 4、使用函数名称作为组件标签名称，可以成组出现也可以自闭合

 

2、创建class组件

class Hello extends React.Component{
  render(){
    return <div>这是一个class组件</div>
  }
}

function App() {
  return (
    <div className="App">
      <Hello />
    </div >
  );
}
class组件注意点

 1、类组件首字母必须大写

 2、类组件继承React.Component 父类，可以使用父类提供的方法或属性

 3、类组件必须提供render方法 render方法必须有返回值