이전 클래스 구성 요소를 함수로 변환합니다.이렇게 하자!

현재 사람들은 리액트에서 갈고리를 사용하는 것이 클래스를 사용하는 것보다 낫다고 보편적으로 여긴다.이 문제에 관해서는 대량의 블로그와 토론이 있는데, 시간의 추이에 따라 그들은 점점 일치하게 갈고리의 방향으로 발전하고 있다.그러나, 나의 React 교육은 여전히 클래스를 사용하고, 나는 많은 개발자들이 오늘날도 클래스를 사용하고 있다는 것을 안다.그들 중 많은 사람들이 이렇게 하는 이유는 내가 클래스를 계속 사용하는 이유와 같다. 나는 클래스를 바탕으로 하는 상태 구성 요소에 익숙해졌다. 만약에 내가 전환을 한다면 나는 어떻게 상태와 생명 주기를 실현하는지 다시 배워야 한다.아마도 이것은 가장 중요한 원인이 아닐 것이다. 그러나 배워야 할 것이 너무 많기 때문에'낡은 방법'이 오늘 나에게 완벽하게 적용되었을 때 새로운 일을 배우는 방법을 우선적으로 고려하기 어렵다.
문제는 면접에서 갈고리를 사용하길 바란다는 것이다.만약 네가 한 과목을 사용한다면, 너는 가장 어려운 면접 문제를 만날 것이다."왜 그랬어요?"😨...😰...😢
다행히도 한 번의 ahem 학습 경험이 결국 나로 하여금 학습이 연결될 때가 왔다고 확신하게 한 후에 나는 그것들이 사실 결코 나쁘지 않다는 것을 발견했다. 적어도 가장 간단한 실현에서 이렇다.
두 개의'주요적'연결이 있는데 이것이 바로 내가 처음에 관심을 가지던 것이다. useState과useEffect.다음은 클래스와 갈고리를 사용해서 이 두 가지를 어떻게 사용하는지 보여 주는 스타일 없는 디지털 시계 구성 요소를 만들 것입니다.마지막으로, 나는 병렬 비교를 할 것이다.

등급

시작하기 전에 구성 요소를 설정해야 합니다.먼저 React와 해당 어셈블리 클래스를 가져온 다음 상속된 시계 어셈블리를 생성합니다.

import React, {Component} from 'react';

export default class Clock extends Component {};

그럼 우리 나라를 세우는 것부터 시작합시다.현재 날짜/시간을 나타내는 날짜 대상을 만들고 키currentTime를 사용하여 구성 요소의 상태로 설정해야 합니다.

  state = {
    currentTime: new Date
  };

그런 다음 render 함수를 호출하여 DOM에 값을 표시할 수 있습니다.시간 문자열로 변환하려면 toLocaleTimeString()를 사용합니다.

import React, {Component} from 'react';

export default class Clock extends Component {
  state = {
    currentTime: new Date
  };

  render() {
    return(
      <h2>{this.state.currentTime.toLocaleTimeString()}</h2>
    );
  };
};

이것은 페이지에 시간을 표시합니다.그러나 그것을 시계로 만들려면 시간의 흐름에 따라 1초라도 똑딱똑딱 해야 한다.우리는 우선 tick() 함수를 정의하여 상태를 새로운 시간으로 설정합니다.그리고 우리는 1초의 간격을 설정해서 1초에 한 번씩 똑딱거리는 함수를 호출하려고 한다.간격에 대해 구성 요소가 설치되기를 기다린 다음 간격 타이머를 시작해야 합니다.구성 요소가 설치된 경우componentDidMount 라이프 사이클 방법을 사용합니다.마지막으로, 만약 시계 구성 요소가 마운트 해제된다면, 우리는 간격을 멈추기를 희망합니다. 이렇게 하면 컴퓨터가 이유 없이 계속 계수를 하지 않을 것입니다."구성 요소 마운트 해제 후"작업을 완성하기 위해서, 우리는 componentWillUnmount 을 사용합니다. 이것은 구성 요소가 소각되기 전에 실행됩니다.

import React, {Component} from 'react';

export default class Clock extends Component {
  state = {
    currentTime: new Date
  };

  tick() {
    this.setState({currentTime: new Date});
  };

  componentDidMount() {
    this.int = setInterval(() => this.tick(), 1000);
  };

  componentWillUnmount() {
    clearInterval(this.int);
  };

  render() {
    return(
      <h2>{this.state.currentTime.toLocaleTimeString()}</h2>
    );
  };
};

지금 우리는 똑딱거리는 시계가 하나 생겼다!

갈고리

이제 갈고리를 이용해서 똑같은 일을 하는 법을 봅시다.마찬가지로 구성 요소 설정부터 시작해야 합니다.우리는 지금 export 문장을 끝까지 옮겨야 한다는 것을 주의하십시오.

import React, {useState, useEffect} from 'react';

const Clock = () => {};

export default Clock;

그리고 우리는 다시 같은 키와 값을 사용하여 우리의 상태를 설정할 것이다.여기서 우리는 두 개의 독립된 변수를 동시에 정의한다.currentTime는 우리의 열쇠이다setCurrentTime는 교실에서 호출하는 것과 같다this.setState().마지막으로 호출useState은 실제 호출setCurrentTime이기 때문에 초기 상태를 설정하기 위해 매개 변수를 전달해야 한다. 이 예는 날짜 대상이다.

const [currentTime, setCurrentTime] = useState(new Date);

우리가 보여준 내용은 변하지 않을 것입니다. 그러나 클래스 구성 요소가 아니라 함수 구성 요소를 사용하기 때문에 JSX로 돌아가기만 하면 됩니다. render() 함수를 사용할 필요가 없습니다.

import React, {useState, useEffect} from 'react';

const Clock = () => {
  const [currentTime, setCurrentTime] = useState(new Date);

  return(
    <h2>{this.state.currentTime.toLocaleTimeString()}</h2>
  );
};

export default Clock;

시계가 똑딱똑딱 소리를 낼 때가 되었다.우리는 tick() 함수를 다시 정의할 것입니다. 이 함수는 상태를 새로운 시간으로 설정합니다.우리는 일반 함수 (실례적인 방법은 클래스가 없음) 를 정의함으로써 이 점을 실현한다. 이것은 우리의 새로운 setCurrentTime 함수 변수를 사용하여 상태를 바꾼다.흥미로운 것은 종류가 없으면 생명주기 방법이 없기 때문에 우리는 사용해야 한다useEffect().이 함수는 실제로componentDidMount와 componentWillUnmount 방법을 포함한다.우리는 여전히 간격을 정의하고 리셋을 tick() 로 설정해야 하지만, 지금은 useEffect 함수를 다른 함수로 되돌려 줍니다.이 되돌아오는 함수 대표 componentWillUnmount 는 구성 요소가 삭제된 후에 시작되는 모든 서비스를 정리하는 데 사용됩니다.

import React, {useState, useEffect} from 'react';

const Clock = () => {
  const [currentTime, setCurrentTime] = useState(new Date);

  function tick() {
    setCurrentTime(new Date);
  };

  useEffect(() => {
    let int = setInterval(() => tick(), 1000);
    return cleanup => {
      clearInterval(int);
    };
  });

  return(
    <h2>{currentTime.toLocaleTimeString()}</h2>
  );
};

export default Clock;

마지막으로 우리는 함수를 화살표 함수로 한층 더 변환할 수 있다.아래 내용을 나란히 보고 재구성된 구성 요소를 보세요.

비교

갈고리
등급


기능적인 방식이 더 간결해 보이지 않습니까?그럼 너는...갈고리를 사용하기 시작할 거라고 확신하십니까? 아니면 저처럼 열심히 공부해야 합니까?

규칙을 정의하는 것을 좋아하기 때문에 목록에 따라 조작할 수 있습니다. 다음은 클래스를 함수로 변환하는 목록입니다.

가져오기 선언 변경

보낸 사람: import React, {Component} from 'react'

-import React, {useState, useEffect} from 'react'

구성 요소 선언 변경

보낸 사람: export default class Clock extends Component {}

부터: const Clock = () => { & 내보내기를 파일

의 끝으로 이동

주 정의 변경

보낸 사람: state = {currentTime: new Date};

-const [currentTime, setCurrentTime] = useState(new Date);

사용 상태 데이터

의 모든 위치에서 드래그 앤 드롭this.state.

모든 this.setState()를 useState에 정의된 새로운 함수로 변경

모든 실례 방법/변수를 일반 함수/변수로 변경

보낸 사람: tick() {}/this.int =

-function tick() {};/int =

Alt: 함수를 화살표 함수tick = () => {}로 변환

마지막으로, 라이프 사이클 방법을 useEffect()로 변경

보낸 사람: componentDidMount() {};/componentWillUnmount() {}

부터: useEffect(), 정리 함수 되돌리기