어떻게 React에서 상태 갈고리를 사용합니까

소개하다.
연결 고리는 리액트 16.8에 도입됐다.이 특성은 우리가 구성 요소를 작성하는 방식을 완전히 바꾸었다.
연결을 사용하기 전에 기능 구성 요소에서 상태를 사용할 수 없다는 것을 알 수 있습니다.기능 구성 요소에 상태를 추가할 때마다 이 구성 요소를 클래스로 다시 작성해야 합니다.귀찮아.국가가 연계하여 최종적으로 이 문제를 해결하였다.

사용 방법
상태 갈고리는 다음과 같이 사용됩니다.

import React, {useState} from 'react';

const CreateDebate = () => {
    // We declare a state variable, called debateName
    const [debateName, setDebateName] = useState("");

    return (
        <div>
            <p>Enter a debate name:</p>
            <input type="text"
            value={debateName}
            onChange={e => setDebateName(e.target.value)}>
        </div>
    )
}

여기 아주 간단한 코드가 있습니다.CreateDifference라는 기능 구성 요소를 만들었습니다.이 구성 요소는 div 요소를 렌더링합니다.이 요소에서 우리는 입력이 있는 단락을 찾았다.우리는 갈고리 상태와useState를 사용하여 이 구성 요소에 상태를 추가합니다.우리는 그것의 작업 원리를 상세하게 소개할 것이지만, 지금은 그것을 클래스 구성 요소의 동일한 기능과 비교할 것이다.

import React from "react";

export default class CreateDebateClass extends React.Component {
  constructor() {
    this.state = {
      debateName: ""
    };
  }

  render() {
    return (
      <div>
        <p>Enter a debate name:</p>
        <input
          type="text"
          value={this.state.debateName}
          onChange={e => this.setState({ debateName: e.target.value })}
        />
      </div>
    );
  }
}

기능 구성 요소
React 갈고리는 클래스에 적용되지 않습니다.그것들은 함수와만 함께 일한다.알림 메시지로 기능 구성 요소는 다음과 같이 다른 방식으로 작성할 수 있습니다.

function MyFunctionComponent() {
  //Hooks go here
  return <div />;
}

const MyFunctionComponent = () => {
  //Hooks go here
  return <div />;
};

React 팀에서는 기능 구성 요소라는 용어를 사용하여 이러한 기능에 대해 논의하는 것이 좋습니다.갈고리를 사용하기 전에, 갈고리가 무상태 구성 요소나 기능 구성 요소라는 것을 알 수 있습니다.

갈고리 디테일.
갈고리는 도대체 무엇입니까?갈고리는 특수한 기능의 하나다.일부 React 기능을 사용할 수 있습니다.우리의 첫 번째 예는 상태 연결을 상세하게 소개했다.이 갈고리를 사용할 때, 클래스 내 구성 요소의 상태 특성을 볼 수 있습니다.
특정한 갈고리를 사용하려면 먼저 그것을 가져와야 한다.

import React, { useState } from "react";

const StatefulFunction = () => {
  // Your code...
};

이전에, 구성 요소 내에서 상태를 사용해야 할 때, 이 구성 요소는 클래스가 되어야 합니다.이제 useState 함수만 가져오면 됩니다!
모르거나 기억하지 못하는 사람들에게 상태는 특징이다.함수 호출 사이에서 변수 값을 보존할 수 있습니다.보통 함수가 그 일을 완성할 때 변수는 사라진다.인터페이스를 업데이트하고 구성 요소를 다시 렌더링해야 할 때마다 문제가 발생할 수 있습니다.상태가 있으면, 우리는 시간의 추이에 따라 변수를 보류하고 갱신할 수 있으며, 진전을 잃지 않을 것이다.

const Example = () => {
  const [firstName, setFirstName] = useState("Damien");
  return <div />;
};

useState 함수는 새로운 상태 변수를 설명합니다.이 함수는 새로운 사용 방법의 하나다.네가 교실에서 발견한 것을 설명한다.위에서 보듯이useState는 매개 변수를 받아들입니다.이 매개 변수는 초기 상태를 대표한다.클래스에서, 이것은 구조 함수에서 완성될 것이다.그러나 클래스에서 초기 상태는 문자열이나 정수가 하나라도 대상이 되어야 합니다.

class Example extends React.Component {
  constructor() {
    this.state = {
      firstName: "Damien"
    };
  }

  render() {
    //...
  }
}

use State가 있으면 마음대로 할 수 있습니다.여기, 나는 나의 초기 상태가 문자열이었으면 한다.

그것의 보답은 무엇입니까?이런 문법은 어떻게 된 것입니까?

const [firstName, setFirstName] = useState("Damien");

useState 함수는 두 값을 반환합니다.첫 번째 값은 현재 상태이고, 두 번째 값은 이 상태를 업데이트하는 함수입니다.우리의 예에서firstName은 현재 상태이고 setFirstName은 상태 값을 수정할 수 있는 함수입니다.
만약 네가 익숙하지 않다면 문법이 좀 이상할 수도 있다.이것이 바로 우리가 말한 수조 분해이다. 이것은 우리가 자바스크립트 ES6에서 얻은 매우 멋진 작은 문법 특성이다.
이 문법은 그룹의 첫 번째 항목을 변수에 분배할 수 있도록 합니다. 여기는firstName이고, 그룹의 두 번째 항목은setFirstName이라는 변수에 분배됩니다.이 이름들은 React 라이브러리의 일부분이 아니라 완전히 임의입니다.코드에 맞는 변수를 선택하십시오.
useState에서 사용하는 배열 구문 구문은 다음 코드와 같습니다.

let firstNameVariables = useState("Damien"); // This is an array with two values
let firstName = firstNameVariables[0]; // First item
let setFirstName = firstNameVariables[1]; // Second item

이런 접근 값의 방식은 좀 지루하고 혼란스럽다.따라서 그룹 해체 기능은useState 갈고리를 작성하는 좋은 방법이다.

읽기 상태
클래스 구성 요소에서 읽을 수 있음this.state.debateName:

<p>The debate name is {this.state.debateName}.</p>

상태 연결이 되어 있어 간단히 사용할 수 있습니다debateName:

<p>The debate name is {debateName}.</p>

기억: 이 변수 이름은useState 함수로 되돌아오는 첫 번째 항목의 이름입니다.

상태 업데이트
클래스 어셈블리의 상태를 업데이트하려면 setState를 사용합니다.

<input
  value={debateName}
  onChange={e => this.setState({ debateName: e.target.value })}
/>

상태 갈고리를 사용하면 useState에서 제공하는 함수를 사용합니다. 두 번째 항목은 다음과 같습니다.

<input value={debateName} onChange={e => setDebateName(e.target.value)} />

나의 예시에서, 나는 이 함수 setDebateName 를 호출했다.이 이름은 React API의 일부가 아니라는 점에 유의하십시오.나는 이미 이 함수의 이름을 선택했으니 가능한 한 그것들을 명확하게 설명해 주십시오.저희도 this가 필요하지 않습니다. 왜냐하면 우리는 이미 debateName와 setDebateName를 성명했기 때문입니다.

요점을 요약하고 다시 말하다.
상태 연결을 사용하는 방법에 대해 살펴보겠습니다.

import React, { useState } from "react";

const DebateNameInput = () => {
  const [debateName, setDebateName] = useState("");

  return (
    <div>
      <input value={debateName} onChange={e => setDebateName(e.target.value)} />
      <p>The debate name is {debateName}.</p>
    </div>
  );
};

첫 줄에서useState 함수를 React에서 가져올 수 있도록 합니다.

화살표 문법으로 함수를 만들고 이름을 붙인다DebateNameInput.

useState 함수라고 합니다.이것은 두 개의 값을 포함하는 그룹, 즉 현재 상태와setter를 충당하는 함수를 되돌려줍니다.수조 해구 문법 때문에, 우리는 한 줄에서 이 값들을 분배할 수 있다.우리는 첫 번째debateName와 두 번째setDebateName라고 부른다.useState 함수는 초기 상태를 나타내는 매개 변수를 받아들인다.우리의 예시에는 빈 문자열이 있다.

우리의 함수는 일부 JSX를 되돌려준다.현재 상태를 값으로 입력하십시오.우리는 그것의 이름을 지었다debateName.이 입력이 변경 이벤트를 등록할 때마다 우리는 setDebateName 을 호출하고 입력한 새 값을 매개 변수로 합니다.그러면 현재 값debateName을 새 값으로 바꿉니다.

React는 새 상태 값을 사용하여 어셈블리를 다시 렌더링합니다.

여러 상태 변수 사용
지금까지 우리는 한 번에 하나의 상태 변수만 처리했다.물론 구성 요소에 여러 개의 상태 변수가 있을 수 있습니다.필요한 경우 여러 useState 함수를 사용할 수 있습니다.

function fruitBasket = () => {
  const [numberOfBananas, setNumberOfBananas] = useState(0)
  const [numberOfApples, setNumberOfApples] = useState(3)
  const [numberOfPeaches, setNumberOfPeaches] = useState(2)

  //... rest of your code
}

여기서 우리는 세 개의 다른useState 함수를 사용하여 세 개의 상태 변수와 세 개의 다른 설정기를 설명한다.
너는 몇 개의 상태 변수를 사용할 필요가 없다.useState는 객체 및 배열을 저장할 수도 있으므로 충분히 가능합니다.

function fruitBasket = () => {
  const [numberOfFruits, setNumberOfFruits] = useState({bananas: 0, apples: 3, peaches: 2})

  //... rest of your code
}

알아야 할 것은 업데이트 상태 변수numberOfFruits와 클래스의 상태 변수this.setState가 다르다는 것이다.상태 갈고리에서setter 함수 교체setState 함수를 통합합니다.즉, 적절한 업데이트numberOfFruits를 수행하려면 다음이 필요합니다.

setNumberOfFruits({ ...numberOfFruits, bananas: 2 });
setNumberOfFruits({ ...numberOfFruits, apples: 3 });

확장 연산자(...를 사용하여 현재 상태를 유지하고 변경할 변수만 바꿉니다.첫 번째 함수 호출은 바나나 수량을 2로 바꾸고, 두 번째 함수 호출은 애플 수량을 3으로 바꾼다.