반응 훅: useCallback 이해

useCallback 익명 을 '저장' 으로 되 돌려 줍 니 다.
component render 에서 익명 방법 을 설명 하 는 것 을 피 합 니 다. 이러한 익명 방법 은 반복 적 으로 재 설명 되 기 때문에 여러 번 이용 되 지 못 하고 component 가 불필요 한 렌 더 링 을 반복 하기 쉽 습 니 다.
 Class component 에서 우 리 는 보통 반전 함 수 를 클래스 구성원 으로 설명 합 니 다.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.clickCallback = this.clickCallback.bind(this);
    }
    clickCallback() {
        // ...
    }
    render() {
        return this.clickCallback}>Click Me!;
    }
}

useCallback hook 을 사용 하면 bind 동작 을 피 할 수 있 습 니 다:

function MyComponent(props) {
    const clickCallback = React.useCallback(() => {
        // ...
    }, []);
    return Click Me!;
}

useCallback 캐 시 함수

const fnA = useCallback(fnB, [a])

위의 useCallback 은 우리 가 전달 한 함수 fnB 를 되 돌려 주 고 이 결 과 를 캐 시 합 니 다.a 변경 에 의존 하면 새로운 함수 로 돌아 갑 니 다.함수 로 되 돌아 온 이상 되 돌아 오 는 함수 의 변경 여 부 를 잘 판단 할 수 없 기 때문에 ES6 에 추 가 된 데이터 형식 Set 을 통 해 구체 적 으로 다음 과 같이 판단 할 수 있 습 니 다.

import React, { useState, useCallback } from 'react';
 
const set = new Set();
 
export default function Callback() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        console.log(count);
    }, [count]);
    set.add(callback);
 
 
    return 

        
{count}
        
{set.size}
        

             setCount(count + 1)}>+
             setVal(event.target.value)}/>
        
    
;
}

count 를 수정 할 때마다 set. size 가 + 1 되 는 것 을 볼 수 있 습 니 다. 이 는 useCallback 이 변수 count 에 의존 하고 count 가 변경 할 때 새로운 함 수 를 되 돌려 줍 니 다.val 변경 시 set. size 는 변 하지 않 습 니 다. 캐 시 된 이전 버 전 함 수 를 되 돌려 줍 니 다.
사용 필드:
하위 구성 요 소 를 포함 하 는 부모 구성 요소 가 있 습 니 다. 하위 구성 요 소 는 props 로 함 수 를 받 습 니 다.일반적으로 부모 구성 요소 가 업데이트 되면 하위 구성 요소 도 업 데 이 트 를 실행 합 니 다.그러나 대부분의 장면 에서 업 데 이 트 는 필요 하지 않 습 니 다. 우 리 는 useCallback 을 통 해 함 수 를 되 돌려 주 고 이 함 수 를 props 로 서브 구성 요소 에 전달 할 수 있 습 니 다.이렇게 하면 하위 구성 요 소 는 불필요 한 업 데 이 트 를 피 할 수 있다.

import React, { useState, useCallback, useEffect } from 'react';
function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        return count;
    }, [count]);
    return 

        
{count}
        
        

             setCount(count + 1)}>+
             setVal(event.target.value)}/>
        
    
;
}
 
function Child({ callback }) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
        setCount(callback());
    }, [callback]);
    return 

        {count}
    
}

위의 예 뿐만 아니 라 로 컬 상태 나 props 에 의존 하여 함 수 를 만 들 고 캐 시 함수 에 사용 해 야 하 는 곳 은 모두 useCallback 의 응용 장면 입 니 다.
useEffect, useMemo, useCallback 은 모두 자체 적 으로 폐쇄 되 어 있다.즉, 모든 구성 요소 의 렌 더 링 은 현재 구성 요소 함수 컨 텍스트 의 상태 (state, props) 를 캡 처 하기 때문에 이 세 가지 hooks 가 실 행 될 때마다 현재 상 태 를 반영 합 니 다. 이전 상 태 를 캡 처 할 수 없습니다.이러한 상황 에 대해 우 리 는 ref 를 사용 하여 방문 해 야 한다.
다음으로 전송:https://www.cnblogs.com/Nyan-Workflow-FC/p/11287276.html