Обновление состояния в реале-нативного принятия навсегда

Question

Я добавил возможность «понравиться» сообщению. И вдруг реакция-родная ползает по улитки. Im новый, чтобы реагировать, поэтому на самом деле не уверены, где и когда правильно установить состояние.

Как должным образом привязать возможность понравиться строке в таблице listView?

Heres код ...

'как' текст, чтобы нажать на это ....

<Text onPress={this.likePost.bind(this, feeditem.post_id)}>{feeditem.likes} likes</Text> 

Тогда функция 'симпатия' это ...

likePost(id){ 
    if(this.state.feedData!=null){ 
    var d = this.state.feedData; 
    // Find row by post_id 
    var ix = d.findIndex(x => x.post_id===id); 
    // Only set state if user hasn't already liked 
    if(d[ix].you_liked==0){ 

     // Mark as liked, and increment 
     d[ix].you_liked=true; 
     d[ix].likes = parseInt(d[ix].likes)++; 

     // Set the state after liking 
     this.setState({ 
     feedData: d, 
     feedList: this.state.feedList.cloneWithRows(d) 
     }); 
    } 
    } 
} 

Он работает, и он корректно обновляет данные и показывает в инструментах dev просто отлично. Однако визуализация нового состояния визуально занимает минуту.

Я обновляю состояние неправильно? Какова стоимость для setState? Я думал, что реакция должна была просто повторно отобразить изменения, которые он видит в виртуальной DOM. Почему же это похоже на его рендеринг всего моего списка. И почему более 1 минуты времени загрузки? (явная утечка памяти где-то)?

Кроме того, возможно ли просто увеличивать целое число на «DOM» без запуска повторного рендера?

Answer 1

отрендерить ListView прохождение dataSource и renderRow реквизита

render() { 
    return (
    <ListView 
    dataSource={this.state.dataSource} 
    renderRow={this._renderRow}/> 
); 
} 

Создать renderRow функцию, где ваш может получить доступ к данным и индекс щелкнули строки

_renderRow = (rowData, sectionIndex, rowIndex, highlightRow) => { 
    return (
    <TouchableOpacity onPress={() => { 
     //Here you shoud update state 
    }}/> 
); 
}; 

Кроме того, вы всегда должны сделать копию состояние, прежде чем манипулировать им, потому что его неизменный объект. Попробуйте работать с государственными мутировавшими библиотеками, используйте https://facebook.github.io/react/docs/update.html или другие варианты.

Answer 2

Анимация может занять много времени из-за хром-отладчика. Небольшой способ смягчить это с помощью InteractionManager

likePost(id){ 
    InteractionManager.runAfterInteractions(() => { 
    if(this.state.feedData!=null){ 
     var d = this.state.feedData; 
     // Find row by post_id 
     var ix = d.findIndex(x => x.post_id===id); 
     // Only set state if user hasn't already liked 
     if(d[ix].you_liked==0){ 

     // Mark as liked, and increment 
     d[ix].you_liked=true; 
     d[ix].likes = parseInt(d[ix].likes)++; 

     // Set the state after liking 
     this.setState({ 
      feedData: d, 
      feedList: this.state.feedList.cloneWithRows(d) 
     }); 
     } 
    } 
    }); 

} 

Или отключить хром отладки и использовать андроида монитор, чтобы увидеть отладочные сообщения.