Question

我有这个使用react-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

但是我刚从SO回答中看到forceUpdate()是一个不必要的黑客。

我需要在componentDidMount和componentWillUnmount中创建一个高性能组件？订阅是否必要？如果我只删除this.forceUpdate()那么它是否是一个高性能组件？

Answer 1

看起来您没有在store组件中使用Vepo。或者换句话说，它不需要容器。如果是这种情况，只需从中删除存储。将容器与演示者混合是一种不好的做法。如果您不需要组件知道redux，请不要为它编写容器。如果需要redux store，请写一个单独的容器。

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

使用connect to container component转换无状态组件 - 优化

1 个答案: