MobX에서 반응주기 메소드를 어떻게 사용합니까?

Question

MobX 스토어를 사용하면 일반적인 상태 저장 구성 요소의 기능이 제거됩니까? 현재 componentDidUpdate를 사용하여 prevState & prevProps에 액세스하고 해당 값을 기반으로 다른 메소드를 호출합니다. MobX/React MobX 저장소 내의 라이프 사이클 메소드에 어떻게 접근합니까?

보다 구체적으로, 여기에 무엇을 내 내 현재 코드는 내 라이프 사이클 기능 중 하나에 대한 다음과 같습니다

componentDidUpdate(prevProps, prevState) { 
    const currentWidth = this.state.width.window; 
    const prevWidth = prevState.width.window; 
    if (currentWidth !== prevWidth) { 
     this.setState({...}); 
    } 
} 

방법, 사용 MobX/MobX 반작용 I 효과적으로 같은 일을합니까?

즉, this.state, 생성자 및 라이프 사이클 메소드를 사용하지 않고 Mobx 저장소에서 prevProps 및 prevState와 같은 항목에 액세스하려면 어떻게해야합니까?

Answer 1

MobX는 구성 요소간에 '글로벌'상태를 공유하는 데 문제가 있습니다. 예를 들어 사용자가 로그인하거나 로그 아웃 할 수 있으며, 여러 구성 요소가 그에 따라 다르게 동작해야합니다. MobX를 사용하면 구성 요소 외부에서 '상태'(로그인/로그 아웃)를 이동할 수 있습니다. 실제로 비즈니스 논리가 아니고 프리젠 테이션 논리이기 때문입니다. 물론 상점을 깨끗하게 유지하기 위해 구성 요소에 매우 특정한 상태 조각에 대해서는 여전히 this.state 및 this.setState이 필요합니다.

내 말은 : MobX는 실제로 아무것도 대체하지 않고 this.state을 사용하지 않고 깨끗하고 쉬운 방법으로 새로운 상태를받을 수 있다고 생각합니다. 반응 라이프 사이클 방법을 계속 사용하여 새로운 상태에 대응할 수 있습니다. (MobX가 상태 변화를 감지했을 때 정상적인 수명주기 프로세스가 실행됩니다)

에 대해 this.state을 계속 사용할 수 있습니다.