在Jetpack Compose中停止传递事件/UI-Action回调

在Jetpack Compose中停止传递事件/UI-Action回调

对于大多数屏幕而言，UDF对于事件的传递是低效的。

重要说明： 在本文中，假设您已经熟悉UDF（单向数据流）和MVI架构。

在Google的文档中，他们建议我们使用UDF来增加组件的可测试性和可重用性。例如…

@Composable
fun MyAppTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
    TopAppBar(
        title = {
            Text(text = topAppBarText)             
        },
        navigationIcon = {
            IconButton(onClick = onBackPressed) {/*...*/}
        },
    )
}

通过向组件仅提供其所需的数据topAppBarText，并使用lambda函数onBackPressed来收集UI操作，我们使得该组件具有了可重用性且易于测试。这很棒，对吧？

然而，当您将该原则应用于整个屏幕时，您将很快发现需要从顶部组件一路传递20-30个事件回调到底部组件。让我举个例子 😃

@Composable
fun HomeScreen(
    onItemClick: (String) -> Unit,
    onSearchClick: () -> Unit,
    /* 更多状态和回调 */
) {
    Home(
        onItemClick = onItemClick,
        onSearchClick = onSearchClick,
        /* 更多状态和回调 */
    )
}

@Composable
private fun Home(
    onItemClick: (String) -> Unit,
    onSearchClick: () -> Unit,
    /* 更多状态和回调 */
) {
    HomeContent(
        onItemClick = onItemClick,
        onSearchClick = onSearchClick,
        /* 更多状态和回调 */
    )
}

@Composable
private fun HomeContent(
    onItemClick: (String) -> Unit,
    onSearchClick: () -> Unit,
    /* 更多状态和回调 */
) {
    Row { Button(onClick = onSearchClick) { /***/ } }
    HomeList(
        onItemClick = onItemClick,
        /* 更多状态和回调 */
    )
}

@Composable
private fun HomeList(onItemClick: (String) -> Unit) {
    items.forEach { item ->
        HomeListItem(
            onItemClick = onItemClick
        )
    }
}

@Composable
private fun HomeListItem(onItemClick: (String) -> Unit) {
    Button(onClick = { onItemClick(item) }) {
        /***/
    }
}

在这里，您会注意到我们需要像900次那样传递onItemClick/onSearchClick，这只是一个小例子，在实际项目中，相同回调的数量可能会让您觉得回到XML并不是一个坏主意 😃

另外，请查看Google示例中的此示例，请跟踪回调直至底部和顶部（HomeRoute和JetnewsNavGraph），以获取更多乐趣 🫠

UDF对于可重用/通用组件确实是一个很好的方法，但出于以下3个原因，它不适用于整个屏幕…

1. 除非同一屏幕可重用于创建和更新操作，否则99%的屏幕都不可重用。
2. 几乎所有屏幕的子组件都是特定于该屏幕，不能在其他地方重用。
3. 由于开发人员懒惰，他们不会将组件提取为更小的组件，以避免传递所有这些回调的痛苦。结果，代码将变得难以阅读和维护。

解决方案

解决方案很简单，如果您正在使用MVI，您已经为所有您的意图/操作拥有一个密封类，并在ViewModel中处理它们的onAction()/onIntent()/processIntents()函数。只需传递那个onAction()函数。

注意：即使您没有使用MVI，您仍然可以使用这个解决方案。

@Composable
fun HomeScreen(
    onAction: (UiAcion) -> Unit
) {
    Home(onAction = onAction)
}

@Composable
private fun Home(onAction: (UiAcion) -> Unit) {
    HomeContent(onAction = onAction)
}

@Composable
private fun HomeContent(onAction: (UiAcion) -> Unit) {
    Row { 
        Button(onClick = { onAction(UiAction.OnSearchClick) }) {
           /***/ 
        } 
    }
    HomeList(onAction = onAction)
}

@Composable
private fun HomeList(onAction: (UiAcion) -> Unit) {
    items.forEach { item ->
        HomeListItem(
            item = item,
            onAction = onAction,
        )
    }
}

@Composable
private fun HomeListItem(
    item: String,
    onAction: (UiAcion) -> Unit,
) {
    Button(onClick = { onAction(UiAcion.OnItemClick(item)) }) { /**/ }
}

为什么这样更好？

• 现在只有一个事件回调传递，而不是900次。
• 开发时间更快，开发人员更快乐。
• 您将鼓励您的团队将大型组件拆分为多个子组件，因为没有痛苦。
• 调试变得更容易。比起浏览Action触发的位置，沿着树形结构逐个组件导航，您会更快地找到触发点，而不至于迷失方向。
• 增强的代码可读性。
• 仅传递函数引用，即viewModel::onAction，而不是多个lambda，将在性能上稍微更好，特别是当您在lambda内部使用不稳定的类（如viewModel）时。请查看此视频获取更多信息。

如果您需要使您的屏幕或子组件可重用，只需进行重构。替换onAction为实际回调可能需要5到10分钟，但根据我的经验，这种情况很少，并不值得进行过度优化。