반응 고리로 가볍게 소개합니다.제1부

이 일련의 문장에서 나는 다음과 같은 문제에 대답할 것이다.

갈고리가 뭐예요?

왜 반응 고리가 있습니까?

반응 고리를 어떻게 사용합니까?

지금부터 나는 다음과 같이 가정한다.

갈고리가 뭔지 몰라요.

최소한 React의 기본 지식을 가지고 있다(5분 이상의 강좌는 충분하다).

내 이야기
나는 이미 React와 합작한 지 2년이 넘었다.나는 2년 동안 잘 지냈다는 것을 인정해야 한다.그래서 처음 React hooks를 들었을 때 나는 매우 의심스러웠다."왜 좋은, 효과적인 것들을 바꿔야 합니까?"내가 이 예들을 처음 보았을 때, 나의 느낌은 '이것은 좋은 방향이 아니다' 는 것이 더욱 강렬했다.그러나 후크스가 끊임없이 여러 방면에서 나를 공격하자, 점점 더 많은 사람들이 새로 가입한 React에 대해 기뻐하는 것 같다.한번 해보기로 했어요...나는 즐거운 동네에 가입했다.하지만 우선 해야 할 일은

갈고리가 뭐예요?
구성 요소의 클래스 생성 대신 갈고리를 도입했습니다.뭘로 바꿀까요?대신 함수 생성
"와!"한 사람이 큰소리로 외칠 수 있다.우리는 함수로 구성 요소를 계속 만들 수 있었다.호크의 작은 놀람은 어떻게 된 일입니까?내가 이 문제에 대답하기 전에, 우리는 두 걸음 뒤로 물러서자.

React에서 구성 요소를 어떻게 생성합니까?
일반적으로 두 가지 방법으로 부품을 판자 상자에 넣을 수 있다.

클래스(클래스 구성 요소)를 사용합니다.

기능(기능 구성 요소)을 사용합니다.

기능 구성 요소는 훨씬 간단할 것 같습니다.

키워드와 싸울 필요가 없습니다. 귀속 방법을 기억하세요.

그것들은 가독성이 더욱 강하고 쓰기 속도가 더 빠르다.

그것들은 테스트와 추리하기 쉽다.

그래서 간단한 질문 하나 하자고...

React에서 어셈블리를 생성하는 두 가지 방법이 있는 이유는 무엇입니까?
만약 기능 구성 요소가 이렇게 쿨하다면, 왜 그것들만 사용하는 것이 아니겠는가?처음에는 왜 종류를 사용했습니까?
클래스 구성 요소에는 두 가지 기능 구성 요소가 사용할 수 없는 중요한 기능이 있습니다.

그들은 컨디션이 있을 수 있다.

구성 요소에 접근할 수 있는 생명주기 방법입니다.

무엇이 나라입니까?이것은 구성 요소가 자신의 모든 정보를 기억하는 능력이다.
예를 들어, 단추 구성 요소는 사용자가 그것을 눌렀는지 기억할 수 있다.색상에 따라 녹색 또는 빨간색으로 표시됩니다.
구성 요소의 생명주기 방법은 무엇입니까?구성 요소의 라이프 사이클은 브라우저에서 구성 요소를 처음 그릴 때까지(또는 이전 시간까지) 브라우저에서 제거됩니다.생명주기 방법은 구성 요소가 존재하는 중요한 순간에 코드를 실행할 수 있도록 합니다.
만약 우리가 단추의 높이를 알고 싶다면.이 정보는 브라우저에서 실제 단추를 보여준 후에 사용할 수 있습니다.this 덕분에 우리는 이 단추에 접근해서 렌더링할 때 높이를 얻을 수 있다.
과거에는 기능 구성 요소를 사용할 때 이런 기능을 사용할 수 없었다.그러나 React 16.8 이래로--React 갈고리의 도입 덕분에--상태와 생명주기 방법은 모두 기능 구성 요소에 사용할 수 있다!

코드 보여줘!
클래스 구성 요소를 작성하는 것부터 모험을 시작합시다.
우리는 입력 필드를 보여주는 간단한 구성 요소가 있습니다.구성 요소 상태로 저장되어 입력 필드 위에 표시되는 이름을 입력할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
    state = {
        userName: "Bob",
    }

    handleUserNameChanged = (e) => {
        this.setState({ userName: e.target.value });
    }

    render() {
        return(
            <>
                <h2>User name: {this.state.userName}</h2>
                <input
                    type="text"
                    value={this.state.userName}
                    onChange={this.handleUserNameChanged}
                />
            </>
        );
    }
}

이제 함수 구성 요소를 만듭니다.클래스 구성 요소와 기능이 완전히 같은 구성 요소를 만드는 것이 목표입니다.빈 화살표 함수부터 시작합니다.

import React from 'react';

const MyComponent = () => {
    // code goes here
};

그런 다음 다음,

복제 componentDidMount 방법으로 되돌아오는 코드.그것은 우리의 함수 구성 요소에서 직접 되돌아올 것이다.

복제 render 방법과 그 앞에 handleUserNameChanged 키워드를 추가합니다.

함수 구성 요소에 const 키워드가 없습니다.모든 내용을 삭제합니다.

우리는 this가 아니라 userName에 관심이 있다.코드에서 모두 삭제state.userName.우리는 state.를 대상으로 정의하지 않는다.우리는 state 변수를 정의하고 문자열 userName 을 초기 값으로 한다.

보다 묘사적인 기능의 변경"Bob": setState.입력 필드에서 얻은 값을 전달합니다.이 함수는 변수에 남아 있는 값을 변경setUserName합니다.

우리의 기능 구성 요소는 다음과 같아야 한다.

import React from 'react';

const MyComponent = () => {
    const userName = "Bob";

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    return(
        <>
            <h2>User name: {userName}</h2>
            <input
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

이 단계에서 우리의 조립품은 작용하지 않는다.잘못된 정보를 받았습니다. userName 정의되지 않았습니다.우리 자신에게 setUserName가 무엇인지 일깨워 줍시다.그것은 값을 바꾸는 함수일 것이다.
우리는 이 함수를 위해 간단한 실현을 작성할 것이다.이 함수는 새 setUserName 값을 받아들일 것이며, 현재 userName 값을 되돌려줍니다.

const setUserName = (newUserName) => userName;

이제 기능 구성 요소(4행)에 추가합니다.

import React from 'react';

const MyComponent = () => {
    const userName = "Bob", setUserName = (value) => userName;

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    return(
        <>
            <h2>User name: {userName}</h2>
            <input
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

우리의 코드는 거의 작동할 수 있다.입력 필드와 사용자 이름이 Bob으로 표시되기 때문입니다.하지만 우리는 이 사용자 이름을 바꿀 수 없다.왜?새 사용자 이름을 유지할 수 있는 구성 요소 상태가 없습니다.우리는 이곳에서 상태를 사용하고 싶다.다행히 리액트는 우리에게 userName 갈고리를 주었다.

상태 연결 사용userName는 함수 구성 요소에서 사용할 수 있는 갈고리입니다.useStatehook은 두 요소를 포함하는 배열을 반환하는 함수입니다.

첫 번째 요소는 저장 상태 값의 변수이다.

두 번째 원소는 함수로 우리는 새로운 값으로 상태를 바꿀 수 있다.

우리는 useState 초기 상태 값을 가진 매개 변수를 전달할 수 있다.그것은 useState, useState, string, number, boolean, array 또는 object 중 임의로 할 수 있다.우리의 예에서 우리는 string "Bob"을 전달했다.
우리는 다음과 같이 쓸 수 있다.

const state = useState("Bob"); // state is an array
const userName = state[0]; // first element is a state's value
const setUserName = state[1]; // second element is a function 

어레이의 분해로 인해 우리는 이를 더욱 우아하게 쓸 수 있다.

const [userName, setUserName] = useState("Bob");

우리는 이렇게 이해할 수 있다.

state를 사용하고 그 값을 userName라는 변수에 저장하기를 원합니다.

우리는 새로운 값 호출setUserName 함수를 사용하여 상태를 변경할 수 있다.

초기userName 값을 "Bob"로 설정합니다.

이런 지식이 있으면 우리는 우리의 예로 돌아가자.React에서 가져오고useState 어셈블리에서 사용합니다.

import React, { useState } from 'react'; // import useState hook

const MyComponent = () => {
    const [userName, setUserName] = useState("Bob");

    const handleUserNameChanged = (e) => {
        setUserName(e.target.value);
    }

    return(
        <>
            <h2>User name: {userName}</h2>
            <input
                type="text"
                value={userName}
                onChange={handleUserNameChanged}
            />
        </>
    );
}

현재, 우리의 함수 구성 요소는 클래스 구성 요소와 완전히 같아야 한다.React의 useState 갈고리 덕분에 우리는 상태를 가진 함수 구성 요소를 만들었습니다!

좋아, 그게 작용하고 있어. 그런데 그 기적들은 어디에 있지?
너는 갈고리를 추가해서 반응하는 것이 책상에 어떤 현저한 이익도 가져다 주지 않을 것이라고 생각할 수도 있다.사실 네가 옳다.초기 클래스 구성 요소를 대응하는 함수와 비교하면 큰 차이가 없을 것입니다.왜 이렇게 많은 사람들이 갈고리에 흥분하는지 정말 이해하기 어렵다.
나는 너에게 한 가지 일을 보증한다.만약 네가 이 시리즈의 결말까지 나와 함께 있었다면, 너는 크게 놀랐을 것이다.이거 대박이다!잠깐만요.적어도 나는 하나 있다.
부드러운 소개 부분에서 만나요!

읽어주셔서 감사합니다!네가 이걸 좋아한다면 나에게 알려줘!논평❤️ 또는 공유!
제 계좌를 마음대로 보고 비슷한 내용을 더 많이 보십시오.