Когда SectionList / Flatlist прокручивает / отображает элементы, поток пользовательского интерфейса кажется заблокированным (React Native)

Question

Мы используем Sectionlist и Flatlist в нашем собственном проекте и используем websocket для получения / обновления данных.

Каждый раз, когда мы получаем данные через веб-сокет, мы хотим обновить некоторую информацию в нашем списке разделов / плоских списках, но у нас более 100 строк, поэтому, когда список, пытающийся повторно выполнить рендеринг потока пользовательского интерфейса, кажется заблокированным.Поэтому функция onPress задерживается на 3 ~ 5 секунд.

Итак, мои вопросы:

1. Перерисовывает ли Flastlist / Sectionlist весь список при его обновлении или только отдельные строки?(Поскольку мы обновляем только некоторую информацию в некоторых определенных строках, не у каждой строки есть новая информация для обновления)
2. Если это заново отображает весь список, как я могу позволить Flastlist или Sectionlist только повторно отображать эти конкретные строки?
3. Если он только повторно отображает определенные строки, почему пользовательский интерфейс все еще кажется заблокированным?Как я могу предотвратить эту ситуацию?

4. Или, возможно, проблема не в блоке пользовательского интерфейса?Может быть, есть и другие причины, по которым задерживается функция onPress?Если да, какие проблемы и как я могу это исправить?

   class RowItem1 extends React.Component{
     constructor(props){
     super(props);
    }
   
   shouldComponentUpdate = (nextProps, nextState) => {
       if (nextProps.item == this.props.item) {
     return false;
   }
    return true;
    };
   
   render=()=>{
    return (
       <View>
           <TouchableWithoutFeedback
               onPress={() => { consle.log(1234) }}
           >
           </TouchableWithoutFeedback>
           <View>
               <Text>{this.props.item.text}</Text>
               <Text>{this.props.item.name}</Text>
           </View>
       </View>
   )
    }
    }     
   
   export default class main extends React.Component {
   
            constructor(props) {
           super(props);
       }
   
   componentWillMount = () => {
   var ws = new WebSocket('ws://123456');
   ws.onmessage = function (evt) {
       let data = JSON.parse(evt.data);
       this.setState({
           A: data.A,
           B: data.B,
           C: data.C
       });
   };
   };
   
   getItemLayout = (data, index) => ({ length: 74, offset: 74 * index, index });
   
   renderA = ({ item, index, section }) => {
      return <RowItem1 item={item}/>      
       }
   
   render() {
   return (
       <View>
           <SectionList
               sections={[
                   {
                       title: "A",
                       data: this.state.A,
                       renderItem: this.renderA,
                   },
                   {
                       title: "B",
                       data: this.state.B,
                       renderItem: this.renderB,
                   },
                   {
                       title: "C",
                       data: this.state.C,
                       renderItem: this.renderC,
                   }
               ]}
               initialNumToRender={10}
               removeClippedSubviews={true}
               getItemLayout={this.getItemLayout}
               keyExtractor={(item, index) => item + index}
               extraData={this.state}
               refreshing={this.state.refreshing}
               onRefresh={this.handleRefresh}
           />
       </View>
   );
   }
   }        
   

Первый раз:

    data = {A:[{'text': 0, 'name': 'A'},{'text': 0, 'name': 'B'}, {'text': 0, 'name':'C'}]}

Второй раз:

    data = {A:[{'text': 3, 'name': 'A'},{'text': 0, 'name': 'B'}, {'text': 0, 'name':'C'}]}

Сравните два полученных мной данных, я хочу перерисовать только первую строку списка, потому что обновлена ​​только первая строка данных.Как я могу это сделать?