反应原生 onRefresh 卡住释放

当使用React Native开发应用程序时，你可能会遇到使用 onRefresh 时，下拉刷新导致页面卡住或无法释放的情况。这个问题不仅会影响用户的体验，也会影响你的应用评分。在本文中，我们将详细介绍如何解决这个问题。

问题原因

首先，让我们看看为什么使用 onRefresh 时页面会卡住或无法释放。在React Native中，默认情况下， onRefresh 使用的是 ScrollView 组件，当下拉刷新时，它会异步调用相应的回调函数。但是，由于JavaScript是单线程的，如果回调函数执行时间过长，会导致页面出现阻塞，无法响应用户操作。因此，如果您在 onRefresh 的回调函数中执行一些费时的操作，页面就会出现卡顿的情况。

解决方案

在下面的例子中，我们假设我们在 onRefresh 回调函数中执行了一些费时的操作：

class RefreshableList extends React.Component {
    state = {
        refreshing: false,
        data: []
    };

    fetchData = async () => {
        // 模拟费时的操作
        await sleep(2000);

        return Array.from({ length: 10 }).map((_, i) => ({
            key: i.toString(),
            text: `Item ${i + 1}`
        }));
    };

    handleRefresh = async () => {
        this.setState({ refreshing: true });

        const data = await this.fetchData();

        this.setState({ refreshing: false, data });
    };

    renderItem = ({ item }) => {
        return <Text>{item.text}</Text>;
    };

    render() {
        return (
            <FlatList
                data={this.state.data}
                renderItem={this.renderItem}
                refreshing={this.state.refreshing}
                onRefresh={this.handleRefresh}
            />
        );
    }
}

如上述例子，我们假设我们在 fetchData 中模拟了费时的操作，并且在 handleRefresh 中执行了这个操作。这样当我们下拉刷新时，就会出现卡顿的问题。

方案一：分块加载

第一种解决方案是将 fetchData 的工作分成多个步骤，在每个步骤之后更新界面。这样做的好处是，每次处理完部分数据之后就允许程序运行下一次循环，从而避免了程序响应等待。我们可以将 fetchData 修改如下：

fetchData = async () => {
    const CHUNK_SIZE = 2;
    let i = 0;
    let data = [];

    while (i < 10) {
        const chunk = Array.from({ length: CHUNK_SIZE }, (_, j) => ({
            key: (i + j).toString(),
            text: `Item ${i + j + 1}`
        }));

        data = [...data, ...chunk];
        i += CHUNK_SIZE;

        this.setState({ data });
        await sleep(500);
    }

    return data;
};

现在， fetchData 创建了一个大小为 CHUNK_SIZE 的数据块，将其添加到总数据数组中，并在完成时更新状态。然后，它等待一段时间再执行下一次循环。这样，即使处理十个条目的时间很长，用户仍然可以用页面执行其他任务。

方案二：延迟更新

第二种解决方案是将 fetchData 的工作放在 setTimeout 中，从而使更新延迟到下一帧或事件队列。

fetchData = async () => {
    // 模拟费时的操作
    await sleep(2000);

    return Array.from({ length: 10 }).map((_, i) => ({
        key: i.toString(),
        text: `Item ${i + 1}`
    }));
};

handleRefresh = async () => {
    this.setState({ refreshing: true });

    // 将 fetchData 放在 setTimeout 中，使其异步执行
    setTimeout(async () => {
        const data = await this.fetchData();

        this.setState({ refreshing: false, data});
    }, 0);
};

现在，我们将 fetchData 放在了 setTimeout 中，使它异步执行。这样，即使更新需要很长时间，用户也不会发现阻塞。

总结

在React Native中，使用 onRefresh 时可能会出现页面卡死的情况。我们通过分块加载和延迟更新两种方法解决了这个问题。在实际开发中，可以根据具体情况选择适合自己的解决方案，提高用户体验和应用评分。

参考

• When React Native app is onRefresh, touch hang or can't release ☆1