Jetpack Compose：我应该将 ViewModel 传递到组件树还是使用回调？

Question

我在 Jetpack Compose 中有一个嵌套组件结构，其中深度嵌套的组件需要与 ViewModel 交互。我正在尝试确定处理这种交互的最佳方法。

这是我的组件结构：

class MainViewModel : ViewModel() {
    fun handleButtonClick() {
        // Do something
    }
}

// Approach 1: Passing ViewModel down
@Composable
fun ComposableA(viewModel: MainViewModel) {
    ComposableB()
    ComposableC(viewModel = viewModel)
}

@Composable
fun ComposableC(viewModel: MainViewModel) {
    ComposableD(viewModel = viewModel)
}

@Composable
fun ComposableD(viewModel: MainViewModel) {
    Button(onClick = { viewModel.handleButtonClick() }) {
        Text("Click Me")
    }
}

// Approach 2: Using Callbacks
@Composable
fun ComposableA(viewModel: MainViewModel) {
    val onButtonClick = { viewModel.handleButtonClick() }
    
    ComposableB()
    ComposableC(onButtonClick = onButtonClick)
}

@Composable
fun ComposableC(onButtonClick: () -> Unit) {
    ComposableD(onButtonClick = onButtonClick)
}

@Composable
fun ComposableD(onButtonClick: () -> Unit) {
    Button(onClick = onButtonClick) {
        Text("Click Me")
    }
}

Which approach is considered better practice?

Answer 1

不要将视图模型传递给可组合项。

您希望尽可能减少重组。为了使 Compose 能够跳过函数，它必须确定参数是否发生变化。底层有很多优化，但作为开发人员，您可以轻松实现：仅传递不可变且稳定的参数。视图模型两者都不是，所以你不应该将它们作为参数传递。

相反，这样做：

@Composable
fun Screen() {
    val viewModel: MainViewModel = viewModel()
    CustomButton(onButtonClick = viewModel::handleButtonClick)
}

@Composable
fun CustomButton(onButtonClick: () -> Unit) {
    Button(onClick = onButtonClick) {
        Text("Click Me")
    }
}

其中

Screen

是需要视图模型的最顶层可组合项。