반응 제시 — 현대 구조와 상태 갱신

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
React는 현대 인터랙티브 전방 웹 응용 프로그램을 구축하는 데 가장 자주 사용하는 전방 라이브러리입니다.모바일 응용 프로그램을 구축하는 데도 사용할 수 있다.본고에서 우리는 React를 사용하여 응용 프로그램을 더욱 쉽게 구축할 수 있는 기교와 요령을 소개할 것이다.

클래스 구성 요소의 사용 감소
클래스 구성 요소에는 생명주기 연결을 처리하고 this의 값이 정확한지 확인하는 등 문제가 있다.
React 갈고리가 도입됨에 따라 기능 부품은 현재 지능화되었다.따라서 우리는 클래스 구성 요소를 사용하는 것처럼 기능 구성 요소를 사용할 수 있지만 this와 생명주기 연결이 필요하지 않다.
예를 들어, 다음과 같이 훅을 통해 API에서 컨텐트를 로드하는 useEffect 어셈블리를 쉽게 생성할 수 있습니다.

import React from "react";

export default function App() {
  const [name, setName] = React.useState({});
  const getName = async () => {
    const res = await fetch("https://api.agify.io?name=michael");
    setName(await res.json());
  };
  React.useEffect(() => getName(), []);
  return <div className="App">{name.name}</div>;
}

위 코드에서는 로드된 데이터를 얻기 위해 API를 호출하는 React.useEffect 호출이 있습니다.우리는 setName 되돌아오는 React.useState 함수 설정 데이터를 사용합니다. 이 함수는 상태 변수와 설정 상태의 함수를 되돌려줍니다.
그리고 되돌아오는 div에 표시합니다.
클래스 기반 구성 요소에 대해 동일한 작업을 수행하려면 다음 코드를 작성해야 합니다.

import React from "react";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  async componentDidMount() {
    const res = await fetch("https://api.agify.io?name=michael");
    this.setState({ name: await res.json() });
  }

  render() {
    return <div className="App">{this.state.name.name}</div>;
  }
}

보시다시피 그것은 좀 길다.또한 클래스 구성 요소를 만들기 위해 React.Component 클래스를 확장해야 합니다.
그 밖에 우리는 구조 함수에서 초기화this.state를 하고 호출super해야 한다.componentDidMount 갈고리에서 이것은 useEffect와 빈 그룹을 두 번째 매개 변수로 사용하는 것과 같습니다. 우리는 코드를 호출해서 API에서 우리가 원하는 데이터를 불러옵니다.
그리고 우리는 예전처럼div를 사용하여render 방법에서 데이터를 나타낸다. 단지 우리는 this.state를 인용해서 이 점을 실현해야 한다.
보시다시피 기능 구성 요소의 버전이 더 짧습니다.그 밖에 우리는 우리가 적절하다고 생각하는 갈고리를 사용할 수 있다. 이것은 구성 요소의 생명주기 방법과 달리 구성 요소의 생명주기 방법은 생명주기의 일부 부분에서만 운행한다.
예를 들어, 입력 값의 변화를 관찰하기 위해 갈고리useEffect를 변경하고 다음과 같이 API를 호출할 수 있습니다.

import React from "react";

export default function App() {
  const [name, setName] = React.useState("");
  const [result, setResult] = React.useState({});
  const getName = async () => {
    const res = await fetch(`https://api.agify.io?name=${name}`);
    setResult(await res.json());
  };
  React.useEffect(() => {
    getName();
    return () => {};
  }, [name]);

  return (
    <div className="App">
      <input onChange={e => setName(e.target.value)} />
      <p>{result.name}</p>
    </div>
  );
}

위의 코드에서 우리는 useEffect 갈고리를 사용하여 name를 두 번째 매개 변수로 name수조에 전달하여 useEffect값의 변화를 관찰한다.return 리셋 중인 useEffect 문장은 필요할 때 청소 코드를 실행하는 데 사용됩니다.
그리고 우리는 이전과 비슷한 방식으로 호출getName을 했는데 URL에 삽입name만 했다.보시다시피 useEffect 갈고리는 React의 단일 생명주기 방법보다 더 많이 만든다.우리는 참고하지 않아도 this 이 모든 것을 해냈다. 그것도 매우 좋다. 왜냐하면 그것은 항상 사람을 곤혹스럽게 하기 때문이다.
이것은 연결이 있는 함수 구성 요소를 사용하는 또 다른 원인이다.

초기 상태에서 아이템을 사용하지 마세요.
구성 요소를 만들 때 구조 함수가 한 번만 호출되기 때문에 초기 상태에서 도구를 사용해서는 안 된다.
이것은 다음에 도구를 변경할 때 구성 요소 상태가 업데이트되지 않는다는 것을 의미합니다.
참고 아이템의 더 좋은 방법은 componentDidUpdate에서 하는 것이다.이것은 우리가 어떤 일이 변할 때(예를 들어 도구가 변할 때) 구성 요소를 업데이트할 수 있도록 하는 생명주기 방법이다.
예를 들어 우리는 다음과 같은 방식으로 this.setState에서 componentDidUpdate를 호출할 수 있다.

import React from "react";

class Count extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }
  componentDidUpdate(prevProps) {
    if (this.props.count !== prevProps.count) {
      this.setState({ count: this.props.count * 2 });
    }
  }
  render() {
    return <div>{this.state.count}</div>;
  }
}

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Count count={count} />
    </div>
  );
}

위 코드에서 우리는 prevProps.count를 호출하기 전에 this.props.count의 값이 this.setState의 값과 다른지 검사한다. 그러면 우리는 반복적이고 막을 수 없이 그것을 호출하지 않을 것이다.그리고 우리는 this.state.count 방법에 설정된 render를 렌더링했다.
이것은 정확합니다. 왜냐하면 우리는 아이템의 값에 따라 상태를 갱신하고 있기 때문입니다.우리는 전달count된 App 아이템의 계수를 2로 곱해야 한다.
만약 그것이 구조 함수에 있다면 this.state.count 업데이트되지 않을 것입니다. 왜냐하면 우리의 예시처럼 도구가 바뀔 때 업데이트되지 않기 때문입니다.

결론
갈고리가 도입됨에 따라 기능 구성 요소와 갈고리를 결합시켜 상태 있는 구성 요소를 만들 때가 되었다.그것은 생명주기 처리 방법의 번거로움을 줄이고 this의 가치를 낮춘다.
또한 클래스 구성 요소를 사용한다면,props를 구조 함수에서 상태 속성의 값으로 설정하지 말아야 합니다. 구성 요소를 처음 불러온 후에,prop는 상태를 영원히 업데이트하지 않기 때문입니다.반대로 우리는 setState에서 componentDidUpdate를 호출하여 우리의 프로 값으로 상태를 업데이트해야 한다.