当UI数据类变量变更时，如何避免Compose重组？

问题根源 #

你的State是一个data class，任何字段（比如scrollPosition、page）更新都会生成全新的State实例，导致Route重组，进而触发Screen及其内部LazyVerticalGrid的重组——哪怕核心的list数据完全没变化。下面是几种行业常用的优化方案，包括你提到的状态拆分：

1. 拆分细粒度UI状态（推荐的最佳实践） #

将大而全的State拆分为多个职责单一的小状态类，让不同UI区域只订阅自己依赖的状态流，从根源上缩小重组范围：

// 列表核心数据（仅影响LazyVerticalGrid）
@Parcelize
data class ListContentState(
    @IgnoredOnParcel val list: List<ViewType> = emptyList(),
    val page: Int = 1,
    val scrollPosition: Int = 0
): Parcelable

// 加载状态（影响加载动画、加载更多逻辑）
data class LoadingState(val isLoading: Boolean = false)

// 过滤弹窗相关状态（仅影响弹窗显示和过滤逻辑）
data class FilterState(
    val isDialogDisplayed: Boolean = false,
    val filter: Int? = null,
    val order: String = ORDER_ASC,
    val year: String = ""
)

在ViewModel中分别暴露这些状态的StateFlow：

class YourViewModel : ViewModel() {
    private val _listContentState = MutableStateFlow(ListContentState())
    val listContentState = _listContentState.asStateFlow()

    private val _loadingState = MutableStateFlow(LoadingState())
    val loadingState = _loadingState.asStateFlow()

    // 其他状态流...
}

然后在Compose中分别收集：

@Composable
internal fun Route(
    viewModel: YourViewModel,
    // 其他参数
) {
    val listContentState by viewModel.listContentState.collectAsStateWithLifecycle()
    val loadingState by viewModel.loadingState.collectAsStateWithLifecycle()
    val filterState by viewModel.filterState.collectAsStateWithLifecycle()

    Screen(
        list = listContentState.list,
        page = listContentState.page,
        scrollPosition = listContentState.scrollPosition,
        isLoading = loadingState.isLoading,
        // 其他参数
    )
}

这种拆分让状态变化的影响范围精准可控，只有依赖对应状态的UI部分才会重组。

2. 用derivedStateOf隔离无关状态 #

如果暂时不想拆分状态，可以在Screen内部用remember+derivedStateOf缓存核心依赖，确保只有当list真正变化时，LazyVerticalGrid才会响应：

@Composable
fun Screen(
    list: List<ViewType>,
    isLoading: Boolean,
    scrollPosition: Int,
    // 其他参数
) {
    // 缓存列表数据，只有list变化时才更新
    val stableList = remember { derivedStateOf { list } }
    val stableLoadingState = remember { derivedStateOf { isLoading } }

    LazyVerticalGrid(columns = GridCells.Fixed(2)) {
        items(stableList.value) { item ->
            // 列表项布局
        }
        if (stableLoadingState.value) {
            item { LoadingItem() }
        }
    }
}

这样即使Screen因为scrollPosition变化重组，stableList.value未改变，LazyVerticalGrid的items不会重新计算，避免无效重组。

3. 优化参数稳定性 #

• 确保数据类稳定：让ViewType成为稳定类型（比如用data class，所有属性都是稳定类型），Compose会自动判断列表项是否需要重组，避免无意义的列表项刷新。
• 缓存函数引用：传递给Screen的函数参数（比如onChangeScrollPosition、loadNextPage）用remember缓存，避免每次重组生成新的函数实例触发无关重组：

@Composable
internal fun Route(
    viewModel: YourViewModel,
    // 其他参数
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    // 缓存函数引用，保持稳定
    val onChangeScrollPosition = remember { viewModel::setScrollPositionState }
    val loadNextPage = remember { viewModel::nextPage }

    Screen(
        onChangeScrollPosition = onChangeScrollPosition,
        loadNextPage = loadNextPage,
        // 其他参数
    )
}

4. 局部重组隔离 #

将LazyVerticalGrid封装成独立的子Composable，只接收它真正需要的参数（list、isLoading、lazyListState等），让其他状态的变化不会影响到列表组件：

@Composable
fun Screen(
    list: List<ViewType>,
    isLoading: Boolean,
    scrollPosition: Int,
    onClicked: (Links) -> Unit
) {
    val lazyListState = rememberLazyGridState(initialFirstVisibleItemIndex = scrollPosition)

    // 单独处理滚动位置保存逻辑，不影响列表
    LaunchedEffect(lazyListState) {
        snapshotFlow { lazyListState.firstVisibleItemIndex }
            .distinctUntilChanged()
            .collect { viewModel.setScrollPositionState(it) }
    }

    // 独立的列表组件，只接收核心依赖
    ListGrid(
        list = list,
        isLoading = isLoading,
        lazyListState = lazyListState,
        onClicked = onClicked
    )

    // 其他UI元素（比如过滤弹窗、加载更多按钮）
}

@Composable
private fun ListGrid(
    list: List<ViewType>,
    isLoading: Boolean,
    lazyListState: LazyGridState,
    onClicked: (Links) -> Unit
) {
    LazyVerticalGrid(state = lazyListState, columns = GridCells.Fixed(2)) {
        items(list) { item ->
            // 列表项布局
        }
        if (isLoading) {
            item { LoadingItem() }
        }
    }
}

总结 #

拆分细粒度状态是长期维护的最佳实践，尤其适合状态字段多、UI区域职责明确的场景。同时结合derivedStateOf、参数稳定性优化、局部重组隔离等手段，可以最大化减少Compose的无效重组，提升长列表的性能。

内容的提问来源于stack exchange，提问作者DroidDev