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

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() 是一个不必要的 hack。

我需要在 componentDidMount 和 componentWillUnmount 中做什么才能拥有高性能组件？订阅是必要的吗？如果我只删除 this.forceUpdate() 它会成为一个高性能组件吗？

Answer 1

您似乎没有在 Vepo 组件中使用 store。或者换句话说，它不需要容器。如果是这种情况，只需从中删除商店。将容器与演示者混在一起是一种不好的做法。如果您不需要您的组件了解 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

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

Convert stateless component using connect to container component - optimisation

javascript

reactjs

react-native

react-redux