无状态的React本机切换组件

Question

我只是想切换SearchButton和SearchIcon，我使用下面的代码

  searchBarButton() {
    Actions.refresh();
    this.setState({ showSearchBar: !this.state.showSearchBar });
  }

 render() {
    if (this.state.showSearchBar) {
      return (
        <Header>
          <View style={styles.searchHolder}>
            <Item style={styles.searchBar}>
              <Icon name="ios-search" />
              <Input placeholder="Search" />
            </Item>
            <Button style={styles.searchButton} onPress={this.searchBarButton}>
              <Text>Search</Text>
            </Button>
          </View>
        </Header>
      );
    }
    return (
      <Header>
            <Button onPress={() => this.searchBarButton()} transparent>
              <Icon name="search" style={styles.bigblue} />
            </Button>
      </Header>
    );
  }

所以基本上它最初非常快，但是当我的场景中包含很多平面列表中的项目时，切换之间会有1到2秒的延迟。我猜它是由于重新渲染页面中的所有项目。

那么如何在不使用状态的情况下重新渲染整个页面的情况下，如何以更简单有效的方式切换它

Answer 1

我认为你必须使用style道具隐藏其中一个。

首先渲染两个，将其中一个切换为隐藏（通过使用状态），

 <Header> <View style={[this.state.showSearchBar && styles.hidden]}>Button</View> <View style=[{!this.state.showSearchBar && styles.hidden}]>Icon</View> </Header> 

不要完全从虚拟dom中删除它们（我不知道在移动设备中称它为什么）

Answer 2

我建议你抓一些UI库。 看看这个： https ： //react-bootstrap.github.io/components.html#utilities

你可以在这里搜索你的搜索栏代码

    <Collapse in={this.state.showSearchBar}>
      ...
    </Collapse>

一切都得到了非常有效的照顾。

您只需要在操作符{!showSearhBar && <Component/>}拖动按钮

还可以使用react开发工具来检查重新渲染的内容