1.函数式组件 单文件组件SFC

暴露一个 函数出去 return 一段jsx代码

export defualt const App = () =>{
    return <p>1111</p>
}

2.类组件 和 函数式组件 的区别

类组件可以通过state属性直接定义响应式数据通过this.setState()更改响应式数据

函数式组件没有定义响应式数据的方法，函数式组件需要借助React提供的 hooks组件(内部函数)

类组件的jsx中使用或修改数据都需要有this ,函数式组件没有 this

jsx语法

合成时间对象

组件生命周期

3.函数式组件的响应式数据

React函数式组件中提供了一个hooks组件(React提供的内部方法，专门处理响应式数据) usexxxx Hooks组件 定义响应式数据Hooks: useState()

useState()返回值 是一个数组[有响应式效果的数据，动态修改数据的方法]

• 计数器案例

import React,{ useState } from 'react'

export default function App() {
  const [num,setNum] =useState(100)
  const addBtn = () =>{
    setNum(num+1)    //通过传递心智达到修改目的，因此不能用++
  }

  return (
    <>
      <button onClick={()=>setNum(num-1)}>-</button>
      <span>{num}</span>
      <button onClick={()=>setNum(num+1)}>+</button>
    </>
  )
}