나는 그들을 모두 낚아채겠다

본고는 UPDIVISION과 합작하고 후자는 세계 각지의 회사를 위해 복잡한 소프트웨어를 개발하는 하청회사이다.
네가 바위 밑에서 계속 생활하지 않으면 갈고리를 들은 적이 있을 것이다.

These Hooks?

이것은 과학 기술 문장이기 때문에 우리는 낚시만 하고 나중에 다시 낚시를 하도록 견지합시다.

리액트 16.8.0에 연계를 도입한 것은 애초 어느 정도 의심을 받았다.개발자들은 코드 작성에 더욱 성명적이고 효율적인 해결 방안을 제공하는 훌륭한 보충책이라는 것을 곧 발견했다.
현재 2년 후 갈고리는 이미 React 생태계의 표준 구성 부분이 되었고 어떤 사람들은 클래스 구성 요소 위에서 갈고리를 사용하도록 추진했다.

갈고리는 클래스 구성 요소를 어떻게 바꿉니까
클래스 구성 요소를 사용하는 주요 목적은 상태와 생명주기 방법에 대한 접근을 얻는 것입니다. 이런 방법은 기능 구성 요소에서 사용할 수 없습니다.갈고리는 성능이 나쁜 클래스 구성 요소를 사용하지 않고 기능 구성 요소에서 이러한 특성을 사용할 수 있습니다.
우리 배 위의 갈고리를 좀 봅시다.만일 당신이 React의 기본 지식을 잘 알고 있다면

useStateuseState 갈고리는 상태 변수를 만드는 데 사용됩니다.
문법은 const [<varName>, set<varName>] = useState(initialState)입니다.

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

우리는 setCount 함수를 사용하여 count 변수의 상태를 업데이트할 수 있다.해당 클래스 어셈블리와 비교하기만 하면 됩니다.

class Counter extends React.Component {
    state = {
        count: 0,
    };

    render() {
        return (
            <div>
                <h2>{this.state.count}</h2>
                <button
                    onClick={() =>
                        this.setState({
                            count: this.state.count + 1,
                        })
                    }
                >
                    Increment
                </button>
            </div>
        );
    }
}

기능 구성 요소는 성능이 높을 뿐만 아니라 읽기와 이해도 쉽다.

사용 효과useEffect은 또 다른 표준 연결고리다.주요 목적은 기능 구성 요소에서 생명주기 방법을 집행하는 것이다.
이제 사용자가 대체할 수 있는 라이프 사이클 방법을 살펴보겠습니다.

구성 요소 설치
구성 요소 설치 시 componentDidMount이 실행됩니다.일반적으로 API 호출을 통해 데이터를 가져오고 상태를 업데이트하는 데 사용됩니다.다른 선택은 다음과 같습니다.

useEffect(() => {
    // execute when component is mounted
}, []);

구성 요소 업데이트componentDidUpdate은 상태 또는 아이템 데이터 업데이트 시 실행됩니다.그것은 데이터가 업데이트된 후에 관련 데이터를 업데이트하는 데 사용된다.다른 선택은 다음과 같습니다.

useEffect(() => {
    // execute when `count` is updated
}, [count]);

모든 렌더링에서 useEffect 리셋만 실행하려면 의존항수 그룹을 생략할 수도 있습니다. (이 예는 [count] 입니다.)

구성 요소가 제거됩니다.componentWillUnmount은 구성 요소를 제거하기 전에 실행됩니다.정리 기능으로 주로 timers 또는 listeners을 제거합니다.
다른 선택은 다음과 같습니다.

useEffect(() => {
    return () => {
        // execute when component will be unmounted
    };
}, []);

useContextuseContext 후크는 React와 함께 제공되는 상태 관리 솔루션인 컨텍스트에 액세스할 수 있도록 합니다.문법은const<varName> = useContext(<Context>)입니다.

function Counter() {
    const { count, setCount } = useContext(CounterContext);
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

참고: 구성 요소는 컨텍스트의 React 가상 DOM을 찾을 때 Context.Provider Component으로 포장해야 합니다.

useRefuseRef은 다시 렌더링 사이에 계속 존재하는 변수를 저장할 수 있는 갈고리입니다.
상태 변수와 ref 변수 사이의 주요 차이점은 상태 변수가 업데이트되면 UI가 다시 나타나고 ref의 경우는 다르다는 것이다. 이것은 대개 DOM 요소에 대한 인용을 저장하는 데 사용된다.
문법은 const <varName> = useRef(initialValue)으로 현재 속성을 통해 이 값에 접근할 수 있습니다.

function FancyDiv() {
    const div = useRef();

    const handleClick = () => {
        // `div.current` is a reference to the DOM element
        div.current.style.color = "red";
    };

    return (
        <>
            <div ref={div}>{/* ... */}</div>
            <button onClick={handleClick}>Click me</button>
        </>
    );
}

콜백 사용useCallback은 갈고리로 함수(컴퓨터 과학에서의 최적화 실천)를 기억할 수 있습니다.불필요한 렌더링을 방지하려면 유용합니다.
문법은 const <varName> = useCallback(<function>, [<dependencies>])이다.

function Component() {
   const memoizedCallback = useCallback(() => {
      doSomething(a, b);
   }, [a, b]);

   return (
      /* ... */
   );
}

비망록 사용useMemo은 갈고리로 어떤 값도 기억할 수 있습니다.useCallback처럼 불필요한 렌더링을 방지하는 것도 유익하다.그것은 보통 비싼 계산을 기억하는 데 쓰인다.
문법은 const <varName> = useMemo(<function>, [<dependencies>])이다.

function Component() {
   const memoizedValue = useMemo(() => {
      return computeExpensiveValue(a, b);
   }, [a, b]);

   return (
      /* ... */
   );
}

사용자 교육자useReducer은 갈고리로 구성 요소의 상태를 관리할 수 있습니다.그것의 용도는 useState 갈고리와 같지만, Redux 모드에 따라 상태를 관리하고 업데이트합니다.
문법은 const [<varName>, dispatch] = useReducer(<reducer>, initialState)이다.

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        default:
            throw new Error();
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div>
            <h2>{state.count}</h2>
            <button onClick={() => dispatch({ type: "increment" })}>
                Increment
            </button>
        </div>
    );
}

맞춤형 연결
React는 개발자가 처음부터 자신의 갈고리를 만들 수 있도록 허용한다.
API에서 데이터를 가져오고 useFetch 및 loading 상태와 함께 돌아오는 사용자 정의 갈고리를 만듭니다.

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        (async () => {
            setLoading(true);
            try {
                const response = await fetch(url);
                const jsonData = await response.json();
                setData(jsonData);
            } catch {
                setError(error);
            }
            setLoading(false);
        })();
    }, [url]);

    return { data, loading, error };
}

마무리
본 논문에서 우리는 React의 핵심 개념을 소개했다.
최근에 우리는 전통적인 유형에 기초한 방법이 아닌 갈고리를 사용하는 추세를 보았다.그래서 갈고리를 파악할 때 오류가 발생하지 않습니다. 특히 현재 모든 라이브러리에서 갈고리 기반의 해결 방안을 제공하고 있습니다.
즐거운 코딩!

코드, 소프트웨어 개발 프로세스에 대한 자세한 내용 또는 비즈니스 요구 사항에 적합한 어플리케이션을 구축하려면 UPDIVISION에 문의하십시오.

읽어주셔서 감사합니다.
당신의 개발 난제를 해소하기 위해 최고의 전방 개발 프리랜서가 필요합니까?Upwork으로 문의하십시오.
뭐 하는지 보고 싶으세요?내 Personal Website 및 GitHub 보기
연락하고 싶어요?나에게 구원의 손길을 내밀다
2022년 중 디지털 유목자로 출발하는 프리랜서입니다.길을 재촉하고 싶습니까?따라와.
내 블로그에 관심을 가지고 매주 뉴스를 이해하다
FAQ
다음은 내가 자주 묻는 몇 가지 문제다.그래서 나는 이 흔한 문제 부분이 너의 문제를 해결할 수 있기를 바란다.

저는 초보자입니다. 전단 네트워크 개발을 어떻게 배워야 합니까?
다음 기사를 보십시오.

지도해 주시겠어요?
죄송하지만, 제 업무량이 너무 많아서, 누구를 지도할 시간이 없습니다.