轉換使用連接到容器組件無狀態組件 - 優化

我有一個使用反應 - 終極版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

但是我剛剛從SO回答中看到，forceUpdate()是不必要的破解。

我需要做什麼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

我已經更新了答案，並將它們添加回來。我刪除了他們，因爲他們不需要:)。將所有商店添加到一個組件中，如代碼，並不是一個好主意。 –

轉換使用連接到容器組件無狀態組件 - 優化

回答

相關問題