2017-09-19 1 views
0

제 생각에 라이프 사이클 메소드는 비동기입니다. render을 실행하기 전에 해결할 componentWillMount에 조치를 전달하고 싶습니다.React lifecycle 메소드에서 약속은 후속 라이프 사이클 메소드를 일시 중지합니까?

당신이 render으로 사물을 제어하기 위해 기다릴 setState를 사용하여 REDUX 조치에 대한 약속을 사용하고 비동기 동작을 제어하는 ​​한 가지 방법 :

componentWillMount() { 
    this.props.myDispatchedAction().then(() => { 
    this.setState({loaded: true}) 
    }) 
} 

render() { 
    return (
    <div> 
     { this.state.loaded ? <div>waited for promise</div> : null } 
    </div> 
) 
} 

을하지만 단순한 사실이라면 약속이 사용되고 있음 (render을 중단하면?), 이것을 async/await과 같은 방법으로 동기화 할 수 있습니까?

async componentWillMount() { 
    await this.props.myDispatchedAction() 
} 
+0

어디에서 비동기식 메소드를 사용할 수 있는지 이해 했습니까? 나는 그것을위한 문서를 찾을 수 없었다 –

+0

@DayanMorenoLeon 나는 아주 쉽게 틀릴 수 있었다. 라이프 사이클 이벤트가 동기이면, 내 비동기/대기 예가 작동한다는 의미입니까? – Andrew

+0

롤, 나는 당신이 나를 호기심을 느끼게했기 때문에 진심으로 묻고 있었다. –

답변

0

동기식으로 보이지만, async/await은 기본적으로 Promise의 구문 설탕입니다. 따라서 비동기식이므로 기능이 변경되지 않아야합니다.

+0

"기능을 변경해서는 안 됨"이란 의미에 대해 좀 더 자세히 설명해 주시겠습니까? .then + this.setState와 비교되는 기능을 언급하고 있습니까? 아니면 샘플 코드와 함께 async/await를 사용하더라도 구성 요소가 전혀 렌더링되지 않는 방법에 영향을주지는 않습니까? – Andrew

+0

내가 틀릴 수도 있지만, 뜻은 _async/await_를 사용하면'componentWillMount()'의 실행을 "중단"하지 않는다는 것입니다. 귀하의 경우, 내가 말한 (왜냐하면 Promise가 여전히 보류 중일 때 render()가 호출 될 것이기 때문에) 두 버전간에 차이가있을 것입니다. –