Verwenden von setState für externe UI-Komponenten?

Question

Ich bin ziemlich neu zu reagieren und ich verwende derzeit native reagieren. Ich versuche, eine Komponente zu schaffen, die von meiner State-Management-Bibliothek abgekoppelt ist, sei es Redux oder Flux, mit der Absicht, dass ich sie schließlich öffentlich teilen kann. Mein Problem rührt von der Tatsache her, dass ich momentan redux verwende, aber die Komponente selbst verwendet this.state und this.setState, um ihren internen Zustand zu erhalten, der wie ein Anti-Pattern aussieht, und die Renderer scheinen nicht zu funktionieren. Meine Frage ist also, wie erstelle ich eine isolierte Komponente, die nicht auf Redux, Flussmittel usw. angewiesen ist, sondern in der Lage ist, den internen Zustand aufrechtzuerhalten? Wie machen es üblicherweise Komponenten von Drittanbietern?

Answer 1

Ich glaube nicht, dass die Verwendung des Komponentenstatus (this.state) ein Anti-Pattern ist. In der Tat denke ich, dass dies der richtige Weg für eine Komponente ist, ihren eigenen, internen Zustand zu erhalten/zu aktualisieren. Sie müssen sich nur darüber im Klaren sein, dass das Ändern des Status einer Komponente (this.setState) dazu führt, dass der render() erneut aufgerufen wird. Wenn Sie den Status aktualisieren möchten, aber Sie nicht möchten, dass die Komponente erneut gerendert wird, sollten Sie die shoudComponentUpdate(nextProps, nextState)-Funktion der Komponente überschreiben und ordnungsgemäß implementieren.

Es gibt viele Gründe für eine Komponente, ihren Status zu aktualisieren. Zum Beispiel habe ich eine Komponente mit einer render() ähnlichen Funktion wie diese habe:

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

So basierend auf seinem aktuellen Zustand macht die Komponente der entsprechende Kind-Komponente.