コンテナコンポーネントに接続し使用してステートレスなコンポーネントを変換する - 最適化

私が反応し-Reduxのconnectを使用して、このコンポーネントがあります。コンテナコンポーネントに接続し使用してステートレスなコンポーネントを変換する - 最適化

let Vepo = (props) => (
    <Container > 
    <Header style={styles.header}> 
     <Left> 
     <Button transparent> 
     </Button> 
     </Left> 
     <Body> 
     <Title style={styles.title}>Search</Title> 
     </Body> 
     <Right> 
     </Right> 
    </Header> 
    <Container style={styles.container}> 
     <ScrollView > 
     <Keywords /> 
     <Categories /> 
     </ScrollView> 
    </Container> 
    </Container> 
) 

Vepo = connect(
    null, 
    null 
)(Vepo) 

export default Vepo

をそして私はちょうど簡単にライフサイクルメソッドを使用するためにはconnectずにコンテナコンポーネントにそれを変換しています：

class Vepo extends Component { 
    componentDidMount() { 
    const { store } = this.context 
    this.unsubscribe = store.subscribe(() => { 
     this.forceUpdate() 
     console.log(store) 
    }) 
    console.log(store) 
    } 

    componentWillUnmount() { 
    this.unsubscribe() 
    } 

    render() { 
    return(
    <Container > 
    <Header style={styles.header}> 
     <Left> 
     <Button transparent> 
     </Button> 
     </Left> 
     <Body> 
     <Title style={styles.title}>Search</Title> 
     </Body> 
     <Right> 
     </Right> 
    </Header> 
    <Container style={styles.container}> 
     <ScrollView > 
     <Keywords /> 
     <Categories /> 
     </ScrollView> 
    </Container> 
    </Container> 
)} 
} 
Vepo.contextTypes = { 
    store: React.PropTypes.object 
} 

export default Vepo

しかし、私はちょうどその答えから見てきましたforceUpdate()は不要なハックです。

performantコンポーネントを使用するには、componentDidMountとcomponentWillUnmountで何をする必要がありますか？購読は必要ですか？もし私がthis.forceUpdate()だけを削除すれば、それはパフォーマンスの高いコンポーネントになりますか？

出典

2017-04-17 BeniaminoBaggins

Vepoコンポーネントにstoreを使用していないようです。または、言い換えれば、コンテナは必要ありません。この場合は、ストアをストアから削除してください。コンテナとプレゼンターを混在させるのは悪い習慣です。あなたのコンポーネントがreduxを意識する必要がない場合は、コンテナを記述しないでください。還元店が必要な場合は、別のコンテナを作成してください。

class VepoPresenter extends Component { 
    componentDidMount() { 
    console.log("componentDidMount"); 
    } 

    componentWillUnmount() { 
    console.log("componentWillUnmount"); 
    } 

    render() { 
    return (
     <Container > 
     <Header style={styles.header}> 
      <Left> 
      <Button transparent> 
      </Button> 
      </Left> 
      <Body> 
      <Title style={styles.title}>Search</Title> 
      </Body> 
      <Right> 
      </Right> 
     </Header> 
     <Container style={styles.container}> 
      <ScrollView > 
      <Keywords /> 
      <Categories /> 
      </ScrollView> 
     </Container> 
     </Container> 
    ) 
    } 
} 

Vepo = connect(
    null, 
    null 
)(VepoPresenter); 

export default Vepo

出典

2017-04-17 03:40:18

おかげで、私は私が必要と述べたライフサイクルの方法はありますか？ – BeniaminoBaggins

答えを更新して追加しました。私はそれらが必要でないので削除しました:)。コードのように、すべてのストアを1つのコンポーネントに追加するのは良い考えではありません。 –

コンテナコンポーネントに接続し使用してステートレスなコンポーネントを変換する - 最適化

答えて

関連する問題