React 연구 노트 3

반응 후크

일반적으로 사용되는:

useState

const [state, setState] = useState(initialState);

초기 상태에서 state는 에 전달된 첫 번째 매개변수 initialState 의 값과 동일합니다 .

setState 함수는 상태를 업데이트하는 데 사용됩니다.

예:

import React, {useState} from 'react'
    export default function Test() {
        const [name, setname] = useState('zli')
        return (
            <div>
                {name} //'zli' 
                <button onClick={()=>{
                    setname('zll')//'zll'
                }}>changeName</button>   
            </div>
        )
    }
</script>

useEffect

const [name, setname] = useState('zli')
//副作用处理

useEffect(()=>{
    //如果在这里对name做了修改，那么数组中必须指明对应的依赖（即状态）
    setname(name.toUpperCase());
    return () => {
        console.log('在这里组件被销毁')
    }
},[name])

설명하다:

(1) 두 번째 매개변수가 빈 배열이면 첫 번째 매개변수는 한 번만 사용됩니다.

(2) [이름] 이름이 종속성으로 존재하는 경우;

(3) 수정되는 한 첫 번째 매개변수는 한 번 이동합니다.

(4) 여기서는 상태 데이터의 재처리라고 볼 수 있습니다.

useCallback

구성 요소가 다시 렌더링되어 메서드가 다시 생성되지 않도록 하고 캐시 역할을 합니다.

  const [name, setname] = useState('zli')
        const myFn = useCallback(()=>{
            console.log(name);
        },[name])

설명하다:

(1) 이름이 변경된 경우에만 기능이 재생성됩니다.

(2) 빈 배열이 전달되면 함수가 처음으로 생성되고 이후 변경되지 않은 상태로 유지됩니다.

(3) 배열을 전달하지 않으면 매번 새로운 함수가 생성됩니다.

메모 사용

상태 데이터에 대한 계산을 수행하고 최종적으로 결과를 반환합니다.

const getResult = useMemo(()=>list.map(n=>n**2),[list])

useRef

const refContainer = React.useRef(initialValue)

useRef는 .current 속성이 들어오는 매개변수 (initialValue) 로 초기화되는 변경 가능한 ref 객체를 반환합니다.

특징:

useRef는 함수 구성 요소에서만 사용할 수 있는 메서드입니다.
useRef는 문자열 ref, 함수 ref 및 createRef를 제외하고 ref를 가져오는 네 번째 방법입니다.
useRef는 렌더링 주기 동안 절대 변경되지 않으므로 일부 데이터를 참조하는 데 사용할 수 있습니다.
ref.current를 수정해도 구성 요소가 다시 렌더링되지 않습니다.
useRef는 각 재렌더링 후에도 유지되는 반면 createRef는 매번 변경됩니다.

사용자 지정 후크:

(1) "사용"으로 시작해야 합니다.

(2) 두 함수 간에 논리를 공유하고 싶을 때 세 번째 함수로 추출합니다.

(3) 재해석: 복잡한 코드를 함수로 캡슐화합니다.