提高在 React 中渲染数百个组件的性能 [英] Improving the performance of rendering hundreds of components in React

问题描述

我正在用 React Native 渲染一个列表，目前有大约 900 个列表项.我正在映射列表并为每个项目呈现一个组件.React 目前需要大约 3 秒才能做到这一点，这是不可接受的 - 我希望它接近即时.props 从 redux store 传递给列表项组件，列表项嵌套在 React Native ScrollView 组件中.

I am rendering a list in React Native which currently has about 900 list items. I'm mapping through the list and rendering one component for each item. It currently takes about 3 seconds for React to do this which is unacceptable - I would like it to be near instant. Props are passed to the list item component from the redux store and the list items are nested inside the React Native ScrollView Component.

我如何才能提高渲染这些组件的性能，以免出现如此大的延迟?

How can I can I increase the performance of rendering these components so there is not such a huge lag?

这是我的 Contacts 组件:

 class Contacts extends Component {

  renderRegisteredUsers = (contacts) => {
    return contacts.items.map((contact, index) => (
      <ContactListItem
        key={index}
        firstName={contact.user.address_book_name}
        surname={''}
        phoneNumber={contact.user.phone}
        isRegisteredUser={true}
        ccId={contact.user.id}
      />
    ))
  }

  renderContacts = (contacts) => {
    if (contacts) {
      return contacts.map((contact, index) => (
        <ContactListItem
          key={index}
          firstName={contact.firstName}
          surname={contact.surname}
          phoneNumber={contact.phoneNumber}
          isRegisteredUser={false}
        />
      ))
    } else {
      return (
        <>
          <Loader />
        </>
      )
    }
  }

  render() {
    return (
      <>
        <ScrollView>
          <Text style={{ fontSize: 22 }}>
            Your Contacts Using Fleeting
        </Text>
          {this.renderRegisteredUsers(this.props.user.registeredContacts)}
          <Text style={{ fontSize: 22 }}>
            Phone Contacts
        </Text>
          {this.renderContacts(this.props.user.parsedContacts)}
        </ScrollView>
      </>
    )
  }
}

const mapStateToProps = (state) => {
  const { user } = state;
  return { user }
};

export default connect(mapStateToProps)(Contacts);

还有我的 ContactListItem 组件:

class ContactListItem extends Component {
  constructor(props) {
    super(props)
  }

  handleOnClick = () => {
    this.props.calleeId(this.props.ccId)
    Actions.TimeInput();
  }

  render() {
    return (
      <View style={{ margin: 20, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <Text>
          {this.props.firstName + ' ' + this.props.surname + '                          ' + this.props.phoneNumber}
        </Text>
        <Icon name="adduser" size={40} color="green" style={{ alignSelf: "flex-end" }} onPress={this.handleOnClick} />
      </View>
    )
  }
}

const mapDispatchToProps = {
  calleeId,
};

export default connect(null, mapDispatchToProps)(ContactListItem);

提前致谢.

推荐答案

1- 您可以使用 PureComponent 而不是 Component.PureComponent 仅在其 props 更改时重新渲染，而不是在每个父级重新渲染时重新渲染.更多信息:https://reactjs.org/docs/react-api.html#reactpurecomponent

1- You can use PureComponent instead of Component. PureComponent re-renders only when its props change and not re-rendering on each parent re-render. More Information: https://reactjs.org/docs/react-api.html#reactpurecomponent

2- 在您的项目上映射时使用唯一的 key.

2- Use unique keys when you're mapping on your items.

3- 您可以使用 FlatList 而不是 ScrollView.它支持滚动加载.您可以设置一些初始数字并在滚动时呈现其他数字.更多信息:https://facebook.github.io/react-native/docs/flatlist

3- You can use FlatList instead of ScrollView. It supports Scroll Loading. You can set a number of initial numbers and render the others on scroll. More Information: https://facebook.github.io/react-native/docs/flatlist

const renderItem = ({ item }) => (<Text key={item.key}>{item.key}</Text>);

const getItemLayout = (data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
);

const items = [{ key: 'first' }, { key: 'second'}, ...+1000];

function render () => (
  <FlatList
    data={items}
    renderItem={renderItem}
    getItemLayout={getItemLayout}
    initialNumToRender={5}
    maxToRenderPerBatch={10}
    windowSize={10}
  />
);

这篇关于提高在 React 中渲染数百个组件的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！