hooks基础

一，组件的分类

创建方式
函数组件 function App(){}
类组件 class App(){}

---

外观视图
容器组件:负责一个页面(一个容器) 处理数据
视图组件:负责展示某一块内容

---

是否有状态 state
有状态组件
无状态组件

---

函数组件-视图组件-无状态组件
类组件-容器组件-有状态组件

---

二，区别

1.函数组件/无状态/视图组件

没有this
没有 state
没有生命周期
没this,降低函数的耦合性,提高复用性

2.类组件-容器组件-有状态组件

有状态,有state,有生命周期,有refs
state和生命周期 开发更新方便

三，hooks

让函数组模拟 生命周期,state,ref

四，使用状态 （useState）

创state与设置state的方法
const [num,setNum] = useState(5)

五，使用副作用 （useEffect）

1.默认组件挂载完毕,组件将要卸载

useEffect(()=>{
    console.log("模拟组件已经挂载完毕")
   return ()=>{console.log("模拟组件将要卸载")}
},[])

2.没有第二个参数,模拟组已经更新

useEffect(()=>{
    console.log("模拟组件已经更新")
})

3.通过第二个参数,指定更新响应的state

useEffect(()=>{
   console.log("模拟组件count数据已经更新完毕") },
[count])

六，使用dom引用 useRef

var inp = useRef()
<input ref={inp}>

inp.current访问节点

七，介绍

单词	解析
useContext	使用上下文
useReducer	数据处理器
useCallback	回调函数
useLayoutEffect	使用视图副作用
useMemo	使用缓存