React Hook用法示例詳解(6個常見hook)

1、useState:讓函數式組件擁有狀態

用法示例:

// 計數器
import { useState } from 'react'
const Test = () => {
    const [count, setCount] = useState(0);
    return (
        <>
            <h1>點擊瞭{count}次</h1>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </>
    );
}
export default Test

PS:class組件中this.setState更新是state是合並, useState中setState是替換。例如:

// 錯誤示例
import { useState } from 'react'
const Test = () => {
    const [counts, setCounts] = useState({
        num1: 0,
        num2: 0
    });
    return (
        <>
            <h1>num1:{counts.num1}</h1>
            <h1>num2:{counts.num2}</h1>
            <button onClick={() => setCounts({ num1: counts.num1 + 1})}>num1+1</button>
            <button onClick={() => setCounts({ num2: counts.num2 + 1})}>num2+1</button>
        </>
    );
}
export default Test

可以看到useState中setState是替換,不會合並,正確更新:

import { useState } from 'react'
const Test = () => {
    const [counts, setCounts] = useState({
        num1: 0,
        num2: 0
    });
    return (
        <>
            <h1>num1:{counts.num1}</h1>
            <h1>num2:{counts.num2}</h1>
            <button onClick={() => setCounts({ ...counts, num1: counts.num1 + 1})}>num1+1</button>
            <button onClick={() => setCounts({ ...counts, num2: counts.num2 + 1})}>num2+1</button>
        </>
    );
}
export default Test

2、useEffect:副作用,取代生命周期

用法示例,在class組件中如果需要在組件掛載後和數據更新後做同一件事,我們會這樣做:

componentDidMount() {
    // 做一些事
}
componentDidUpdate() {
    // 做一些事
}

可以看出來,如果邏輯復雜後,代碼看起來不優雅,且容易造成邏輯混亂,而使用useEffect:

useEffect(() => {
    // 做一些事
});

此刻已經看到瞭useEffect的基本用法,除此之外,他還可以綁定觸發更新的依賴狀態,默認是狀態中任何數據發生變化副作用都會執行,如:

import { useState, useEffect } from 'react'
const Test = () => {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);
    useEffect(() => {
        console.log('useEffect觸發瞭')
    });
    return (
        <>
            <h1>count1:{count1}</h1>
            <h1>count2:{count2}</h1>
            <button onClick={() => setCount1(count1 + 1)}>count1+1</button>
            <button onClick={() => setCount2(count2 + 1)}>count2+1</button>
        </>
    );
}
export default Test

將上述代碼useEffect第二個參數傳入需要綁定的狀態,可綁定多個:

// 語法:useEffect(回調函數,[依賴值])
useEffect(() => {
    console.log('useEffect觸發瞭')
}, [count1]);

可以看到,隻有綁定的count1發生變化才會觸發,如果傳空數組則任何狀態發生變化都不會觸發,此時useEffect的作用就類似class組件中的componentDidMount,所以發送請求通常也會在此執行。

清理副作用

在上面的操作中都不用清理的副作用,然而,有些副作用是需要去清理的,不清理會造成異常甚至內存泄漏,比如開啟定時器,如果不清理,則會多次開啟,從上面可以看到useEffect的第一個參數是一個回調函數,可以在回調函數中再返回一個函數,該函數可以在狀態更新後第一個回調函數執行之前調用,具體實現:

useEffect(() => {
    // 設置副作用
    return () => {
        // 清理副作用
    }
});

3、useContext:跨組件共享數據

React.createContext();創建一個TestContext對象
TestContext.Provider包裹子組件
數據放在<TestContext.Provider value={value}>的value中
子組件中通過useContext(TestContext)獲取值

import React, { useContext, useState } from 'react';
const TestContext = React.createContext();
const Parent = () => {
    const [value, setValue] = useState(0);
    return (
        <div>
            {(() => console.log("Parent-render"))()}
            <button onClick={() => setValue(value + 1)}>value + 1</button>
            <TestContext.Provider value={value}>
                <Child1 />
                <Child2 />
            </TestContext.Provider>
        </div>
    );
}
const Child1 = () => {
    const value = useContext(TestContext);
    return (
        <div>
            {(() => console.log('Child1-render'))()}
            <h3>Child1-value: {value}</h3>
        </div>
    );
}
const Child2 = () => {
    return (
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>Child2</h3>
        </div>
    );
}
export default Parent

至此數據實現共享瞭,但是可以看到在TestContext中的共享數據隻要發生變化,子組件都會重新渲染,Child2並沒有綁定數據,不希望他做無意義的渲染,可以使用React.memo解決,實現:

const Child2 = React.memo(() => {
    return (
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>Child2</h3>
        </div>
    );
});

4、useCallback:性能優化

語法:

// useCallback(回調函數,[依賴值])
const handleClick = useCallback(()=> {
    // 做一些事
}, [value]);

useCallback返回的是一個 memoized(緩存)函數,在依賴不變的情況下,多次定義的時候,返回的值是相同的,他的實現原理是當使用一組參數初次調用函數時,會緩存參數和計算結果,當再次使用相同的參數調用該函數時,會直接返回相應的緩存結果。

優化性能例子:

import React, { useState, useCallback, memo } from 'react';
const Parent = () => {
    const [value1, setValue1] = useState(0);
    const [value2, setValue2] = useState(0);
    const handleClick1 = useCallback(()=> {
        setValue1(value1 + 1);
    }, [value1]);
    const handleClick2 = useCallback(()=> {
        setValue2(value2 + 1);
    }, [value2]);
    return (
        <>
            {(() => console.log("Parent-render"))()}
            <h3>{value1}</h3>
            <h3>{value2}</h3>
            <Child1 handleClick1={handleClick1} />
            <Child2 handleClick2={handleClick2} />
        </>
    );
}
const Child1 = memo(props => {
    return (
        <div>
            {(() => console.log("Child1-render"))()}
            <button onClick={() => props.handleClick1()}>value1 + 1</button>
        </div>
    );
});
const Child2 = memo(props => {
    return (
        <div>
            {(() => console.log("Child2-render"))()}
            <button onClick={() => props.handleClick2()}>value2 + 1</button>
        </div>
    );
});
export default Parent

useCallback返回的是一個memoized回調函數,僅在其中綁定的一個依賴項變化後才更改可防止不必要的渲染,在跨組件共享數據中舉例的事件是在父組件中點擊觸發,而現在是使用狀態提升,在父組件中傳遞方法供子組件調用,每次render時函數也會變化,導致子組件重新渲染,上面例子useCallback將函數進行包裹,依賴值未發生變化時會返回緩存的函數,配合React.memo即可優化無意義的渲染。

5、useMemo:性能優化

語法:

// useMemo(回調函數,[依賴值])
useMemo(() => {
    // 做一些事情
},[value]);

先看一個例子:

import React, { useState } from 'react'
const Test = ()=> {
    const [value, setValue] = useState(0);
    const [count, setCount] = useState(1);
    const getDoubleCount = () => {
        console.log('getDoubleCount進行計算瞭');
        return count * 2;
    };
    return (
        <div>
            <h2>value: {value}</h2>
            <h2>doubleCount: {getDoubleCount()}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    )
}
export default Test

可以看到getDoubleCount依賴的是count,但value發生變化它也重新進行瞭計算渲染,現在隻需要將getDoubleCount使用useMemo進行包裹,如下:

import React, { useState, useMemo } from 'react'
const Test = ()=> {
    const [value, setValue] = useState(0);
    const [count, setCount] = useState(1);
    const getDoubleCount = useMemo(() => {
        console.log('getDoubleCount進行計算瞭');
        return count * 2;
    },[count]);
    return (
        <div>
            <h2>value: {value}</h2>
            <h2>doubleCount: {getDoubleCount}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    )
}
export default Test

現在getDoubleCount隻有依賴的count發生變化時才會重新計算渲染。

useMemo和useCallback的共同點:

  • 接收的參數都是一樣的,第一個是回調函數,第二個是依賴的數據
  • 它們都是當依賴的數據發生變化時才會重新計算結果,起到瞭緩存作用

useMemo和useCallback的區別:

  • useMemo計算結果是return回來的值,通常用於緩存計算結果的值
  • useCallback計算結果是一個函數,通常用於緩存函數

6、useRef用法:例如要實現點擊button按鈕使input輸入框獲得焦點:

import React, { useState, useMemo } from 'react'
const Test = ()=> {
    const [value, setValue] = useState(0);
    const [count, setCount] = useState(1);
    const getDoubleCount = useMemo(() => {
        console.log('getDoubleCount進行計算瞭');
        return count * 2;
    },[count]);
    return (
        <div>
            <h2>value: {value}</h2>
            <h2>doubleCount: {getDoubleCount}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    )
}
export default Test

這樣看起來非常像React.createRef(),將上面代碼中的useRef()改成React.createRef()也能實現同樣的效果,那為什麼要設計一個新的hook?難道隻是會瞭加上use,統一hook規范?
事實上,它們確實不一樣。

官網的說明如下:

useRef returns a mutable ref object whose .current property is initialized to the passed
argument (initialValue). The returned object will persist for the full lifetime of the component.

翻譯:

簡單來說,useRef就像一個儲物箱,你可以隨意存放任何東西,再次渲染時它會去儲物箱找,createRef每次渲染都會返回一個新的引用,而useRef每次都會返回相同的引用。

到此這篇關於React Hook用法詳解(6個常見hook)的文章就介紹到這瞭,更多相關React Hook用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!