React中常用的兩個Hook是什么

這篇文章給大家分享的是有關(guān)React中常用的兩個Hook是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

先介紹一下什么是hook

Hook是React 16.8新增的特性，專門用在函數(shù)式組件，它可以代替class組件中react的其他特性，是實際工作中要常用到的。

為什么推薦使用hook進行開發(fā)

hook是專門配合函數(shù)式組件開發(fā)使用的，可以用它代替class組件的一些生命周期，避免大量this引起的混亂，因此hook便于開發(fā)，且更易于讓開發(fā)者理解代碼

以上是個人的簡單總結(jié)，更多原因可以參考react官網(wǎng)：

https://react.docschina.org/docs/hooks-intro.html#motivation

useState

代碼中：

React.useState(0)相當(dāng)于class組件中的this.state添加一個屬性值

variable相當(dāng)于class組件中的this.state. variable的值

setVariable可以用來修改variable的值，可以相當(dāng)于class組件中的this.setState

import React,(useState) from 'react'
export default function useState_Demo() {
    const [variable, setVariable] = useState(0);//通過解構(gòu)賦值，我們拿到的variable、setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回調(diào)中傳進來的參數(shù)是variable
    }
    render (
        <div> 
            <button onclick = {change}>點我會使variable+1</button>
        </div>
    )
}

useEffect

代碼中：

以下代碼中可以看出，useEffect的使用代替了在class組件中componentDidMoun、componentDidUpdate、componentWillUnmount的使用

import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//通過解構(gòu)賦值，我們拿到的variable、setVariable
    
    useEffect(() => {
        //這個return是在該組件監(jiān)測的數(shù)據(jù)變化時或者被卸載時調(diào)用的，被卸載時調(diào)用可以相當(dāng)于componentWillUnmount鉤子 
        return () => {
            console.log('該組件被卸載了')
        }
    }, [variable])//第二個參數(shù)傳了[variable]，表示檢測variable的更新變化，一旦variable變化就會再次執(zhí)行useEffect的回調(diào)
                  //第二個參數(shù)傳了[],表示誰都不檢測只執(zhí)行一次useEffect的回調(diào)，相當(dāng)于componentDidMount鉤子
                  //第二個參數(shù)不傳參，只要該組件有state變化就會執(zhí)行useEffect的回調(diào)，相當(dāng)于componentDidUpdate鉤子
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回調(diào)中傳進來的參數(shù)是variable
    }
    render (
        <div> 
            <button onclick = {change}>點我會使variable+1</button>
        </div>
    )
}

使用hook需要注意的

1、只在組件函數(shù)的最外層使用Hook，不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用 Hook

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //這里才是正確的
   useEffect(() => {})
    
   //錯誤1，使用了條件判斷
   if(true) {
        useEffect(() => {})
   }
   //錯誤2，使用了循環(huán)
   while(true) {
        useEffect(() => {})
   }
  //錯誤3,使用了嵌套
  useEffect(() => {
      useEffect(() => {})
  })
}

2、不能在組件的函數(shù)外使用Hook

import React,(useState, useEffect) from 'react'
//錯誤1，在組件函數(shù)外使用了useState
const [variable, setVariable] = useState(0);
//錯誤2，在組件函數(shù)外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
   //在組件函數(shù)里使用才是正確的
   const [variable, setVariable] = useState(0);
}

3、為了避免以上的錯誤，可以 安裝eslint-plugin-react-hooks ESLint 插件來檢查代碼上錯誤

自定義hook

hook就是一個函數(shù)，自定義hook是為了方便組件之間共享邏輯，其實就是對復(fù)用功能進行封裝，自定義hook內(nèi)部也調(diào)用了react自帶的hook，命名要以use開頭

//自定義hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自定義hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

可能你會疑惑，多個組件中使用相同的 Hook 會共享 state 嗎？

答案是：不會。因為每次調(diào)用react自帶的hook都是獨自互不影響的，所以自定義hook被多次重復(fù)調(diào)用也是獨自互不影響的

感謝各位的閱讀！關(guān)于“React中常用的兩個Hook是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！