[reactjs] 비동기 componentDidMount ()를 사용하는 것이 좋습니까?

차이점을 지적하고 문제를 일으킬 수있는 방법을 결정하는 것으로 시작하겠습니다.

다음은 async 및 “sync” componentDidMount()수명주기 방법 의 코드입니다 .

// This is typescript code
componentDidMount(): void { /* do something */ }

async componentDidMount(): Promise<void> {
    /* do something */
    /* You can use "await" here */
}

코드를 보면 다음과 같은 차이점을 알 수 있습니다.

1. async키워드 : 타이프 라이터, 이것은 단지 코드 마커입니다. 그것은 두 가지 일을합니다 :
   • 반환 유형을 Promise<void>대신 강제로 설정하십시오 void. 반환 유형을 약속이 아닌 것으로 명시 적으로 지정하면 (예 : void) typescript에서 오류가 발생합니다.
   • await메소드 내에서 키워드 를 사용할 수 있습니다.
2. 반환 형식이 변경됩니다 void에Promise<void>
   • 이제이 작업을 수행 할 수 있습니다.
     async someMethod(): Promise<void> { await componentDidMount(); }

3. await메소드 내에서 키워드를 사용 하고 일시적으로 실행을 일시 중지 할 수 있습니다 . 이처럼 :

   async componentDidMount(): Promise<void> {
       const users = await axios.get<string>("http://localhost:9001/users");
       const questions = await axios.get<string>("http://localhost:9001/questions");
   
       // Sleep for 10 seconds
       await new Promise(resolve => { setTimeout(resolve, 10000); });
   
       // This line of code will be executed after 10+ seconds
       this.setState({users, questions});
       return Promise.resolve();
   }

이제 어떻게 문제를 일으킬 수 있습니까?

1. async키워드는 절대적으로 무해하다.

2. componentDidMount()반환 유형 Promise<void>도 무해 하므로 메소드를 호출 해야하는 상황을 상상할 수 없습니다 .

   키워드가 Promise<void>없는 반환 유형을 가진 메소드를 호출하면 반환 유형이 인 메소드를 호출하는 await것과 차이가 없습니다 void.

3. componentDidMount()실행 지연 후 수명주기 방법이 없기 때문에 꽤 안전 해 보입니다. 그러나 문제가 있습니다.

   위의 내용 this.setState({users, questions});은 10 초 후에 실행됩니다. 지연 시간의 중간에 또 다른 …

   this.setState({users: newerUsers, questions: newerQuestions});

   … 성공적으로 실행되었으며 DOM이 업데이트되었습니다. 결과는 사용자에게 공개되었습니다. 시계는 계속 똑딱 거리고 10 초가 경과했습니다. this.setState(...)그런 다음 지연 이 실행되고 DOM은 다시 이전 사용자와 이전 질문으로 업데이트됩니다. 결과는 사용자에게도 표시됩니다.

=> 방법 async과 함께 사용 하는 것이 안전합니다 (약 100 % 확실하지 않습니다) componentDidMount(). 나는 그것의 큰 팬이고 지금까지 나는 너무 많은 두통을주는 문제가 발생하지 않았습니다.

답변

componentDidMount()
{
    throw new Error('I crashed!');
}

async componentDidMount()
{
    throw new Error('I crashed!');
}

componentDidMount()
{
    return Promise.reject(new Error('I crashed!'));
}

async componentDidMount()
{
    try
    {
         await myAsyncFunction();
    }
    catch(error)
    {
        //...
    }
}

componentDidMount()
{
    myAsyncFunction()
    .catch(()=>
    {
        //...
    });
}

class BuggyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  buggyAsyncfunction(){ return Promise.reject(new Error('I crashed async!'));}

  async componentDidMount() {
    try
    {
      await this.buggyAsyncfunction();
    }
    catch(error)
    {
        this.setState({error: error});
    }
  }

  render() {
    if(this.state.error)
        throw this.state.error;

    return <h1>I am OK</h1>;
  }
}

componentDidMount() {
    fetch(this.getAuth())
      .then(auth => {
          if (auth) this.checkAuth(auth)
      })
}

async componentDidMount() {
    try {
        const res = await fetch(config.discover.url);
        const data = await res.json();
        console.log(data);
    } catch(e) {
        console.error(e);
    }
}

componentDidMount() {
    fetch(config.discover.url)
    .then(res => res.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));
}