当 SectionList/Flatlist 滚动/渲染项目 UI 线程似乎被阻止时(React Native)

Question

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

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

所以我的问题是：

1. Flastlist/Sectionlist 在更新时会重新渲染整个列表，还是只重新渲染特定行？(因为我们只更新某些特定行中的某些信息，而不是每行都有要更新的新信息(
2. 如果它重新渲染整个列表，我怎么能让 Flastlist 或 Sectionlist 只重新渲染那些特定的行？
3. 如果它只重新呈现特定行，为什么 UI 似乎仍然被阻止？如何防止这种情况？

4. 或者也许问题不在于 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': 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'}]}

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

Answer 1

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

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