외부 UI 구성 요소에 setState 사용?

Question

저는 반응이 상당히 새롭고 현재 반응하는 원주민을 사용하고 있습니다. 필자는 국가 관리 라이브러리에서 분리 된 구성 요소를 만들려고 노력하고 있습니다. 축소 형 또는 유동체가 될 수 있으며 결국 공개적으로 공유 할 수 있습니다. 내 문제는 내가 현재 redux를 사용하고 있지만 구성 요소 자체가 반 패턴처럼 보이는 내부 상태를 유지하기 위해 this.state 및 this.setState을 사용하고 렌더러가 작동하지 않는 것에서 비롯된다. 그래서 내 질문은, 어떻게 redux, 유출 등에 의존하지 않는 고립 된 구성 요소를 만들 수 있습니까?하지만 내부 상태를 유지할 수 있습니까? 제 3 자 구성 요소는 일반적으로 어떻게합니까?

Answer 1

구성 요소의 상태 (this.state)를 사용하는 것이 안티 패턴이라고 생각하지 않습니다. 사실, 이것이 컴포넌트가 자체 내부 상태를 유지/업데이트하는 올바른 방법이라고 생각합니다. 주의해야 할 점은 구성 요소의 상태를 변경하면 (this.setState 사용) render()이 다시 호출된다는 것입니다. 상태를 업데이트하고 싶지만 이 아닌 경우을 다시 렌더링하려는 경우 구성 요소의 shoudComponentUpdate(nextProps, nextState) 함수를 재정의하고 올바르게 구현해야합니다.

구성 요소가 상태를 업데이트하는 데는 여러 가지 이유가 있습니다. 예를 들어, I이 render() 유사한 기능을 갖는 구성 요소가 :

render() { 
    if (this.state.networkError) { 
     return <ErrorView /> 
    } else if (this.state.isLoading) { 
     return <Spinner visible={true}/> 
    } else { 
     return <Text>Success</Text> 
    } 
} 

그래서 현재 상태를 기반으로, 구성 요소가 대응하는 하위 요소는 렌더링한다.