转换使用连接到容器组件无状态组件 - 优化

我有一个使用反应 - 终极版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

我已经更新了答案，并将它们添加回来。我删除了他们，因为他们不需要:)。将所有商店添加到一个组件中，如代码，并不是一个好主意。 –

转换使用连接到容器组件无状态组件 - 优化

回答

相关问题