Javascript 当SectionList/Flatlist滚动/呈现项目时，UI线程似乎被阻止（React Native）

我们在react原生项目中使用Sectionlist和Flatlist，并使用websocket接收/更新数据

每次我们通过websocket接收数据时，我们都想更新Sectionlist/Flatlist中的一些信息，但是我们有100多行，所以当试图重新呈现UI的列表线程似乎被阻塞时。因此，onPress功能延迟3~5秒

因此，我的问题是：

Flastlist/Sectionlist是在更新时重新呈现整个列表，还是仅重新呈现特定行？（因为我们只更新某些特定行中的某些信息，而不是每一行都有新信息要更新）

如果它重新呈现整个列表，我如何让Flastlist或Sectionlist只重新呈现那些特定的行

如果它只重新呈现特定的行，为什么UI看起来仍然被阻塞？我怎样才能避免这种情况

或者问题不在于UI块？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': 3, 'name': 'A'},{'text': 0, 'name': 'B'}, {'text': 0, 'name':'C'}]}

---

比较我收到的两个数据，我只想重新呈现列表的第一行，因为只有第一行数据得到了更新。我该怎么做呢？

我知道这已经很晚了，但是对于那些仍然有这个问题的人，你可以通过将scrollEventThrottle属性设置为非常高的值来修复它，比如1000。我应该注意到，只有在不需要onScroll事件的情况下，这才真正起作用

<FlatList data={data} renderItem={renderItem} scrollEventThrottle={1000} />

你在做什么来阻止无用的重新渲染，比如你在使用pureComponent还是shouldComponentUpdate？@HaiderAli我编辑了我的问题，你介意检查一下吗。谢谢。我们已经应该更新组件，但是当列表重新呈现时，按下onPress仍然会延迟

scrollEventThrottle

*谢谢@Slbox-修复

<FlatList data={data} renderItem={renderItem} scrollEventThrottle={1000} />