React 两种组件

函数组件

// 写  函数组件
function Home() {
  return (
    // 最外层 有一个大的标签 jsx 的语法 不可以并列
    // class名 要写 className=''
    <div className='home'>这是一个函数组件</div>
  )
}
// es6 箭头函数 写法
const Home = () => {
  return (
    <div className='home'>这是一个函数组件</div>
  )
}
// 要导出 对外有 一个能调用的
export default Home

类组件

// 先导入react  官方提供的依赖包
import React, { Component } from 'react'
// 要是不解构 React.Component 解构 Component  等价
class Home extends Component{
  // 里面 默认 有一个 render
  render() {
    return (
      // 这里 就正常写就可以了
      <div className='home'>这是一个函数组件</div>
    )
  }
}
// 要导出 对外有 一个能调用的接口
export default Home