在Jetpack Compose中父组件如何调用子组件的函数？

Junerver
1,165 阅读6分钟

原文地址：# 在Compose中父组件如何调用子组件的函数？

写在前面

本文中提及的use开头的函数，都出自与我的 ComposeHooks 项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关系复杂的状态管理，专心于业务与UI组件。

这是系列文章的第五篇，全部文章：

咋一看标题你可能会觉得这有什么好研究的，请仔细看我的描述：在父组件中调用子组件的函数！

众所周知，如果我们希望让子组件调用父组件的函数，可以如下方式：

那么问题来了，父组件如何调用子组件的函数呢？

Compose 不同于传统的 View 体系，每一个组件都是@Composable注解的函数，没有实例对象，无法对外暴露函数。

你可能会说，父组件调用子组件函数有必要么？

试想这样一个场景，我们有一个复杂的展示页面，里面有 banner轮播图、用户信息、资讯List 等等，他们被放在一个大的可滑动组件中，现在我们要实现这个可滑动组件下拉刷新。

这时事件不再是有子组件发出（不同于"状态向下、事件向上"）,而是父组件发出的，此时应该如何处理？

一个简单的例子：


@Composable
fun Container() {
    Column {
        TButton("refresh"){
            TODO() //如何实现
        }
        (0..10).map {
            SubComponent(index = it)
        }
    }
}

@Composable
fun SubComponent(index:Int) {
    val (state, setState) = useState(0.0)
    //刷新函数在子组件
    fun refresh() {
        setState(Random.nextDouble())
    }
    Column {
        Row {
            Text(text = "index $index: $state")
            TButton(text = "refresh") {
                // 子组件可以轻松的刷新自己
                refresh()
            }
        }
        Divider(modifier = Modifier.fillMaxWidth())
    }
}

方法1：继续状态提升↑！！

我们可以继续贯彻状态提升的思想，父组件的刷新只改变顶层状态，由子组件监听状态变化，实现刷新：

@Composable
fun Container() {
    // 状态提升到父组件
    val (isRefresh, _, setIsRefresh) = useBoolean(false)
    val scope = rememberCoroutineScope()
    Column {
        TButton("refresh") {
            scope.launch {
                setIsRefresh(true)
                delay(1.seconds)
                setIsRefresh(false)
            }
        }
		//.............
    }
}

@Composable
fun SubComponent(index: Int, refreshState: Boolean) {
    val (state, setState) = useState(0.0)
    fun refresh() {
        setState(Random.nextDouble())
    }
    // 子组件监听状态
    useEffect(refreshState) {
        if (refreshState) {
            refresh()
        }
    }
    //.............
}

这样做当然是OK的，代码也可以完美运行，但是我们需要给所有组件加上新的参数，以及 useEffect 监听状态变化；

原始代码同样存在我在上一篇文章中提到的问题，一旦层级过多，就会存在大量中间传递，如果修改就牵一发动全身。

如果你想用这种方法，我建议使用 useContext 进行优化：

val RefreshContext = createContext(false)

@Composable
fun Container() {
    //.............
    Column {
        TButton("refresh") {
           //.............
        }
        // 通过 Provider 向子组件暴露状态
        RefreshContext.Provider(isRefresh){
            (0..10).map {
                SubComponent(index = it)
            }
        }
    }
}

@Composable
fun SubComponent(index: Int) {
    //.............
    // 刷新状态通过 useContext获取
    val refreshState =useContext(context = RefreshContext)
    useEffect(refreshState) {
        if (refreshState) {
            refresh()
        }
    }
    //.............
}

方法2：通过 remember 使用对象中转

例如我们定义一个控制器：

// 控制器类
class Controller() {
    // 定义父组件可调用函数
    fun reset() {
        resetFn?.invoke()
    }
    // 由控制器持有的子组件函数
    private var resetFn: (() -> Unit)? = null
    // 子组件调用注册函数
    internal fun registerRest(resetFn: () -> Unit) {
        this.resetFn = resetFn
    }
}

// 创建控制器的函数
@Composable
fun rememberController) = remember {
    Controller()
}

这样我们只需要在父组件创建控制器，并且将控制器实例作为参数传递给子组件，子组件中调用控制器的注册函数即可。

当然你也可以直接使用 useRef，如果你阅读过 ComposeHooks 的源码，你会发现很多 hooks 都是通过 Ref 对象作为中介，从而传递一个函数给父组件调用。

例如下面这个自定义扩展 useRequest 的例子：

@Composable
fun <TData : Any> useCustomPluginRequest(
    requestFn: suspend (Array<Any?>) -> TData,
    options: RequestOptions<TData> = defaultOption(),
): Tuple8<TData?, Boolean, Throwable?, (Array<Any?>) -> Unit, KFunction1<(TData?) -> TData, Unit>, KFunction0<Unit>, KFunction0<Unit>, () -> Unit> {
    // 父 hook 需要调用插件自行实现的内部函数，声明一个ref用于传递
    val rollbackRef = useRef(default = { })
    val tuple = useRequest(
        requestFn = requestFn,
        options = options,
        arrayOf({
            // 传递 ref 对象给插件函数
            useRollbackPlugin(ref = rollbackRef) 
        })
    )
    return tuple + {
        rollbackRef.current.invoke() //对外暴露的函数
    }
}

@Composable
private fun <TData : Any> useRollbackPlugin(ref: MutableRef<() -> Unit>) = remember {
    object : Plugin<TData>() {
        var pervState: FetchState<TData>? = null
        
        // 插件函数中真实的函数
        fun rollback() {
            pervState?.let { it1 -> fetchInstance.setState(it1.asMap()) }
        }

        override val invoke: GenPluginLifecycleFn<TData>
            get() = { fetch: Fetch<TData>, options: RequestOptions<TData> ->
                initFetch(fetch, options)
                object : PluginLifecycle<TData>() {
                    override val onMutate: ((data: TData) -> Unit)
                        get() = {
                            pervState = fetch.fetchState
                        }
                }
            }
    }.also { ref.current = it::rollback } // 将插件中的函数传递给 ref 对象
}

这个例子中 真实的 rollback 函数是定义在 插件对象实例内部的，我们通过传递 ref，使得父 hook 可以调用这个函数。

useRef 是通用的 hook 函数，它被规范为只有一个成员属性current，如果你期望实现更具有可读性的自定义 hook，我建议还是声明一个 XxxController。

当然这个方法与方法1相似，同样存在多层级的传递问题。

方法3：使用 useEvent

为什么叫这个名字是因为它的使用有一点类似 EventBus 的订阅发布模式，我们先来看改造后的代码

@Composable
fun Container() {
    val post = useEventPublish<Unit>()
    Column {
        TButton("refresh") {
            post(Unit)
        }
        (0..10).map {
            SubComponent(index = it)
        }
    }
}

@Composable
fun SubComponent(index: Int) {
    val (state, setState) = useState(0.0)
    fun refresh() {
        setState(Random.nextDouble())
    }
    useEventSubscribe { _: Unit ->
        refresh()
    }
    //.............
}

使用方法大致如下：

  1. 使用 useEventPublish<Unit>() 拿到一个 post 发布函数，

    尖括号中的是我们需要传递的Event参数类型，由于这里只是简单演示，我直接使用了 Unit

  2. 在需要订阅的事件的组件中使用useEventSubscribe注册一个函数

    注意在闭包中声明正确的类型！

  3. 发布者调用 post 函数，发布事件

与使用 useContext 相似，我们可以用它来解耦父子组件之间的关系，无需担心层级嵌套的问题。

但是同时也要注意，useEventSubscribe 在组件不可见时是自动反注册的，所以需要在可见范围内才能正确的响应。

现在我们可以回答标题的问题了，父组件如何调用子组件函数：

  1. 无法直接调用，因为组件是函数
  2. 通过状态提升，父组件修改状态。子组件监听状态变化间接调用
  3. 使用useEvent相关钩子，通过订阅发布模式，解耦组件关系、实现跨组件通信

Tips

Tips: useEvent 更多是为了用于跨组件通信，并不只是用来解决父组件调用子组件函数哦，post 函数可以传递任意实例。它和 EventBus 是几乎相同的。相同事件类型的订阅者，会接收到相同的事件发布。

探索更多

项目开源地址：junerver/ComposeHooks

MavenCentral：hooks

implementation("xyz.junerver.compose:hooks:1.0.5")

欢迎使用、勘误、pr、star。

avatar
文章
阅读
粉丝