Question

我的编辑信息屏幕必须修改很多信息，并且我使用函数来返回用户界面，如下所示。关键是输入更改后（电子邮件输入，电话输入...），整个屏幕都会重新显示。（例如下面的呈现上传头像的功能）。有什么建议吗？我只希望我的应用重新渲染已修改的组件。还是谢谢你。

_renderUploadAvatar = () => {
   const { shadowContainer, avatarImage, editPictureIconStyle } = styles;
   const { avatarUri } = this.state;
   const touchableProps = {
      style: { alignSelf: 'center' }, disabled: !!avatarUri, onPress: () => this.onClick('upload_avatar')
   }
   const avatarProps = { source: avatarUri || Images.defaultUserAvatar, style: avatarImage }
   const iconProps = {
      name: 'editPicture', fill: Colors.white, width: sizeHeight * 5, height: sizeHeight * 5,
      viewStyle: editPictureIconStyle, onClick: () => this.onClick('upload_avatar'),
   }
   console.log("EditCustomerScreen -> _renderUploadAvatar -> return")
   return (
      <ShadowView style={[shadowContainer, { marginHorizontal: marginSize }]}>
         <TouchableOpacity {...touchableProps}>
            <ImageView {...avatarProps} />
            <SvgIcon {...iconProps} />
         </TouchableOpacity>
         <Text style={[Fonts.style('primary', toRgbA(Colors.primary, 0.5), 'base'), { textAlign: 'center', marginTop: marginSize }]}>{i18nText('information.avatar')}</Text>
      </ShadowView>
   )
}

return (
   <Fragment>
      <Layout {...layoutProps}>
         {this._renderUploadAvatar()}
         {this._renderUpdatePhoneNumbers()}
         {this._renderUpdateEmail()}
         {this._renderUpdateIdentification()}
         {this._renderLanguages()}
         {this._renderEducation()}
         {this._renderCustomerStatus()}
         {this._renderPayOff()}
      </Layout >
      {this._renderApplyButton()}
   </Fragment >
);

Answer 1

您应该为每个控件和视图创建一个组件。这些组件应该从PureComponent扩展，或者，如果您从Component扩展，则必须实现shouldComponentUpdate。

在这里您可以阅读有关PureComponents的更多信息。 PureComponents

在React Native中重新渲染问题

1 个答案: