# React hooks

函數(shù)組件

1. 函數(shù)組件沒有state，沒有this指向

2. 函數(shù)組件沒有生命周期

## userState使用

函數(shù)組件沒有state，提供了useState并提供讀、寫2個(gè)參數(shù),可以對(duì)數(shù)據(jù)進(jìn)行讀、寫操作。

使用代碼

```js

import React ,{useState}from 'react' //先引入

export default function Fun() {

? ? const [name, setname] = useState("zs");//可以通過第一個(gè)參數(shù)讀取數(shù)據(jù)，第二個(gè)參數(shù)是用來改變第一個(gè)參數(shù)的數(shù)據(jù)

? ? const [age, setage] = useState(10);

? ? return (

? ? ? ? <div>

? ? ? ? ? ? <div>姓名:{name}</div>

? ? ? ? ? ? <button onClick={() => {

? ? ? ? ? ? ? ? setname("ls")

? ? ? ? ? ? }}>changename</button>

? ? ? ? ? ? <div>年齡:{age}</div>

? ? ? ? ? ? <button onClick={() => {

? ? ? ? ? ? ? ? setage(age + 1)

? ? ? ? ? ? }}>changeage</button>

? ? ? ? </div>

? ? )

}

```

## useEffect(副作用函數(shù))

1. 函數(shù)組件不存在生命周期 useEffect可以配合邏輯和依賴模擬類中生命周期概念 但是useEffect!=類的生命周期

2. useEffect調(diào)用會(huì)默認(rèn)執(zhí)行一次，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是一個(gè)數(shù)組

### useEffect中第二個(gè)參數(shù)數(shù)組為空和不為空的區(qū)別？

1. 傳空數(shù)組表示副作用函數(shù)不依賴于任何狀態(tài)，狀態(tài)發(fā)生改變，不會(huì)影響到useEffect，并且useEffect只會(huì)執(zhí)行一次

2. 不傳空數(shù)組表示在useEffect中使用了這個(gè)變量，并且在數(shù)組中申明了依賴，當(dāng)依賴的變量狀態(tài)發(fā)生改變時(shí),useEffect會(huì)執(zhí)行，數(shù)據(jù)狀態(tài)再次改變，useEffect會(huì)判斷狀態(tài)有沒有重復(fù)執(zhí)行，重復(fù)了，不會(huì)再次執(zhí)行，沒重復(fù)，useEffect不會(huì)重復(fù)執(zhí)行，如果使用了變量不申明，會(huì)有eslint警告，useEffect再也不會(huì)執(zhí)行,

### useffect使用

```js

import React ,{useEffect,useState}from 'react'

export default function Fun() {

? ? const [name, setname] = useState("zhangshan");

? ? useEffect(()=>{

? ? ? ? setname(name.slice(0,1).toUpperCase()+name.slice(1))

? ? }, [name]);

? return (

? ? <div>Fun--{name}

? ? <button onClick={()=>{

? ? ? ? setname("lisi")

? ? }}>changename</button>

? ? </div>

? )

}

```

### useEffect模擬銷毀組件

通過傳入的函數(shù)return ()=>{} 進(jìn)行銷毀

### useEffect注意點(diǎn)

1. 使用次數(shù)？可以使用多次，可以寫多個(gè)useEffect函數(shù)

2. useEffect和useLayoutEffect的區(qū)別？

? ?a. 調(diào)用的時(shí)機(jī)不一樣，useLayoutEffect更加類似于componentDidMount和componentDidMount操作,在DOM完成更新后會(huì)立即調(diào)用函數(shù)，會(huì)阻塞頁(yè)面渲染，useEffect會(huì)在整個(gè)頁(yè)面都跟新完成之后執(zhí)行

? ?b. useEffect在實(shí)際使用中會(huì)導(dǎo)致頁(yè)面抖動(dòng)，可以把需要操作的dom代碼放在useLayoutEffect中，進(jìn)行dom操作，修改的dom會(huì)和react作出更改一起被渲染在頁(yè)面上，只有一次回流，重繪的代價(jià)