후크가 달린 수출 수업을 이용할 때 수업을 빼먹어야 할까?

후크가 달린 수출 수업을 이용할 때 수업을 빼먹어야 할까?

이것은 지식 기반 질문이다.나는 Angular TypeScript 클래스에 기반한 배경에서 Reaction을 처음 접한다.React를 사용할 때 후크를 컴파일하는 데 문제가 있을 때 TypeScript를 계속 사용하고 싶다.

이 코드는 Create React 앱 라이브러리에서 가져온 것이며 Redex 템플릿을 사용한다.카운터 구성요소를 사용하여 카운터를 표시한다.

import React, { useState } from 'react';

import { useAppSelector, useAppDispatch } from '../../app/hooks';
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  incrementIfOdd,
  selectCount,
} from './counterSlice';
import styles from './Counter.module.css';

export function Counter() {
  const count = useAppSelector(selectCount);
  const dispatch = useAppDispatch();
  const [incrementAmount, setIncrementAmount] = useState('2');

  const incrementValue = Number(incrementAmount) || 0;

  return (
    <div>
      <div className={styles.row}>
        <button
          className={styles.button}
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
        <span className={styles.value}>{count}</span>
        <button
          className={styles.button}
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          +
        </button>
      </div>
      <div className={styles.row}>
        <input
          className={styles.textbox}
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={(e) => setIncrementAmount(e.target.value)}
        />
        <button
          className={styles.button}
          onClick={() => dispatch(incrementByAmount(incrementValue))}
        >
          Add Amount
        </button>
        <button
          className={styles.asyncButton}
          onClick={() => dispatch(incrementAsync(incrementValue))}
        >
          Add Async
        </button>
        <button
          className={styles.button}
          onClick={() => dispatch(incrementIfOdd(incrementValue))}
        >
          Add If Odd
        </button>
      </div>
    </div>
  );
}

이거 예상대로 작동해서이렇게 바꿨어.

export default class Counter extends React.Component<unknown> {
  render(): {
    const count = useAppSelector(selectCount);
    const dispatch = useAppDispatch();
    const [incrementAmount, setIncrementAmount] = useState('2');

    const incrementValue = Number(incrementAmount) || 0;

    return (
      <div>
        <div className={styles.row}>
          <button
            className={styles.button}
            aria-label="Decrement value"
            onClick={() => dispatch(decrement())}
          >
            -
          </button>
          <span className={styles.value}>{count}</span>
          <button
            className={styles.button}
            aria-label="Increment value"
            onClick={() => dispatch(increment())}
          >
            +
          </button>
        </div>
        <div className={styles.row}>
          <input
            className={styles.textbox}
            aria-label="Set increment amount"
            value={incrementAmount}
            onChange={(e) => setIncrementAmount(e.target.value)}
          />
          <button
            className={styles.button}
            onClick={() => dispatch(incrementByAmount(incrementValue))}
          >
            Add Amount
          </button>
          <button
            className={styles.asyncButton}
            onClick={() => dispatch(incrementAsync(incrementValue))}
          >
            Add Async
          </button>
          <button
            className={styles.button}
            onClick={() => dispatch(incrementIfOdd(incrementValue))}
          >
            Add If Odd
          </button>
        </div>
      </div>
    );
  }
}

하지만 내가 그것을 컴파일할 때 - 나는 매우 흔한 오류를 얻는다.

오류: 잘못된 후크 호출.후크는 기능 구성 요소의 신체 내부에서만 호출할 수 있다.이는 다음 이유 중 하나로 발생할 수 있다.

1. 리액트 및 렌더러 버전이 일치하지 않을 수 있음(예: 리액트 DOM)
2. 후크의 규칙을 어기고 있을지도 몰라
3. 같은 앱에 반응 복사본이 두 개 이상 있을 수 있음 이 문제를 디버깅하고 해결하는 방법에 대한 팁을 보려면 https://reactjs.org/link/invalid-hook-call을 참조하십시오.

아주 명백하게 내 코드는 어떤 오류도 따르지 않는다. (일단, 어느 것이 나를 기쁘게 하는지는 꽤 명확하다.)그러나 이것은 후크를 사용할 때 수출 기본 클래스 구문을 잃게 된다는 것을 의미하는가?

컨텍스트를 위해, 나는 이 코드를 나의 부모 컴포넌트 (App)에 사용했고 그것은 컴파일을 한다.

import React from 'react';
import './App.css';
import Counter from './features/counter/Counter';

export default class App extends React.Component<unknown> {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Counter />
           ...

어떤 정보라도 감사하겠소.고마워요.

****** 편집 *********

여기에 설명된 대로 고주문 구성 요소를 사용할 수 있음이 확인됨

리액션 클래식 클래스 구성 요소에서 리액션 후크를 사용하는 방법은?

즉, React now에 대한 클래스 기반 구문을 사용하는 것이 현명한가?

아래 답변에 기반한 추가 읽기: https://www.twilio.com/blog/react-choose-functional-components

이전 상태로 되돌리십시오. 후크는 React Function 구성 요소 내에서만 사용할 수 있습니다,

// Correct, function component
export function Counter() {

// Incorrect, class component
export default class Counter extends React.Component<unknown> {
  render(): {

보풀 문제는 #2 "후크 규칙을 깨는 것"이다.특히 이것은 반응함수의 통화 후크만 위반하는 것이다(두 번째 예는 반응 함수가 아닌 반응 클래스).

참조URL: https://stackoverflow.com/questions/69379800/should-i-move-away-from-classes-when-using-export-classes-with-hooks