React Nativeのステート更新を正しく行うにはどうすればいいですか？

私は小さなReactNativeアプリケーションを書いています。これは、ユーザーが人々をイベントに招待できるようにするものです。React Nativeのステート更新を正しく行うにはどうすればいいですか？

このデザインには招待者の一覧が含まれています。招待者の一覧には、招待者を招待/招待するためのチェックボックスが付いています。リストの一番上にあるもう1つのチェックボックス。すべての招待者を一斉に招待/招待しません。最後に、ボタンが最終的に招待状を送信するために使用されます。

これらの要素のそれぞれの状態は、他の要素による状態の変化に依存するため、ユーザーがそのいずれかで操作を行うたびにUI全体を再レンダリングする必要があります。しかし、これは正しく動作している間、それはas shown in this video

、私はかなりの数のパフォーマンスの問題を引き起こしているここで私が使用しているコードだ：

import React, { Component } from 'react'; 
import { Container, Header, Title, 
    Content, Footer, FooterTab, 
    Button, Left, Right, 
    Center, Body, Text, Spinner, Toast, Root , CheckBox, ListItem, Thumbnail} from 'native-base'; 

import { FlatList, View } from 'react-native'; 

export default class EventInviteComponent extends Component { 


constructor(props) { 
    super(props); 
    console.disableYellowBox = true; 

    this.state = { 
     eventName: "Cool Outing!", 
     invitees:[] 
    } 

    for(i = 0; i < 50; i++){ 
     this.state.invitees[i] = { 
      name: "Peter the " + i + "th", 
      isSelected: false, 
      thumbnailUrl: 'https://is1-ssl.mzstatic.com/image/thumb/Purple111/v4/62/08/7e/62087ed8-5016-3ed0-ca33-50d33a5d8497/source/512x512bb.jpg' 
     } 
     } 


    this.toggelSelectAll = this.toggelSelectAll.bind(this) 
} 

toggelSelectAll(){ 
    let invitees = [...this.state.invitees].slice(); 
    let shouldInviteAll = invitees.filter(invitee => !invitee.isSelected).length != 0 

    let newState = this.state; 
    newState = invitees.map(function(invitee){ 
     invitee.isSelected = shouldInviteAll; 
     return invitee; 
     }); 
    this.setState(newState); 
} 


render() { 

    let invitees = [...this.state.invitees]; 

    return (
     <Root> 
      <Container> 

       <Content> 
        <Text>{this.state.eventName}</Text> 

        <View style={{flexDirection: 'row', height: 50, marginLeft:10, marginTop:20}}> 
         <CheckBox 
        checked={this.state.invitees.filter(invitee => !invitee.isSelected).length == 0} 
        onPress={this.toggelSelectAll}/> 
         <Text style={{marginLeft:30 }}>Select/deselect all</Text> 
        </View> 

        <FlatList 
        keyExtractor={(invitee, index) => invitee.name} 
        data={invitees} 
        renderItem={(item)=> 
         <ListItem avatar style={{paddingTop: 20}}> 
          <Left> 
           <Thumbnail source={{ uri: item.item.thumbnailUrl}} /> 
          </Left> 
          <Body> 
           <Text>{item.item.name}</Text> 
           <Text note> </Text> 
          </Body> 
          <Right> 
           <CheckBox 
           checked={item.item.isSelected}/> 
          </Right> 
         </ListItem>}/> 

       </Content> 

       <Footer> 
        <FooterTab> 
         <Button full 
         active={invitees.filter(invitee => invitee.isSelected).length > 0}> 
          <Text>Invite!</Text> 
         </Button> 
        </FooterTab> 
       </Footer> 

      </Container> 
     </Root>); 
    } 
}

出典

2017-11-23 Spaci Tron

私はここにいくつかの提案をしています：＃1。レンダー機能で配列を複製する必要はありません。＃2。あなたがしたようなものはすべて国家に入れてはいけません。私はそれが招待者のIDの配列であると思う。＃3。 FlatListがここで何も改善していないのは変だ。チェックボックスへの参照を取得し、すべてを再レンダリングする代わりに、それぞれを切り替えることができます。助けてくれることを願っています。 –

私はお勧め：

作成することによって、あなたのコードを分割

複数のコンポーネントがあるので大量にはないrender()
招待者/グローバルな状態を保存するためにReduxを使用する変更の際に再レンダリングするコンポーネントを選択する

これはReact Nativeを学ぶ良い方法です！

出典

2017-11-23 11:34:05 Max

コードでは、クラスメソッドtoggelSelectAll() {...}では、回避する必要があるthis.state = ...を使用して状態を直接変更します。クラスconstructor() {...}にはthis.state = ...を使用して状態を初期化し、this.setState({...})を使用して他の状態を更新する必要があります。これはあなたのパフォーマンスの問題を助けるが、次のようにtoggelSelectAll()を交換してみなければならない場合

わからない：

toggelSelectAll() { 
    const {invitees} = this.state; 

    const areAllSelectedAlready = invitees.filter(({isSelected}) => !isSelected).length === 0; 

    this.setState({ 
    invitees: invitees.map(invitee => ({ 
     ...invitee, 
     isSelected: !areAllSelectedAlready 
    })) 
    }); 
}

幸運！そして、コンストラクタ内の2番目のthis.state = ...を削除するために、上記のコードをリファクタリングしてもらいたいかどうかを教えてください（Reactを書くときには避けるべきです）。

出典

2017-11-23 11:46:30 sammysaglam

あなたは正しいです。タイプミスがありました。今修正しましたが、パフォーマンスの改善には役立ちません。 –

ああ！理解された。それでも、パフォーマンスの問題がある理由はわかりません。 50レコードを更新するだけでこの問題が発生しないようにするのは非常に奇妙です。 – sammysaglam

何らかの理由で、チェックボックスのアニメーションがJSスレッドによってブロックされています。 –

React Nativeのステート更新を正しく行うにはどうすればいいですか？

答えて

関連する問題