Question

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

每次我们通过websocket接收数据时，我们都希望更新“部门列表” /“平面列表”中的某些信息，但是我们有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': 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} />

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

1 个答案: