关于Jetpack Compose重绘（Recomposition）的一个坑

￡神魔★判官ぃ 2022-10-29 12:22 283阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]  
最近尝鲜Jetpack Compose时，踩了一个坑，可能是很多人都容易忽略的问题，特此记录一下。  
当前最新版本： `1.0.0-alpha11`

# Compose重绘 #

--------------------

关于Compose的重绘（Recomposition），官方是这样介绍的：

> **Recomposition skips as much as possible**  
> When portions of your UI are invalid, Compose does its best to recompose just the portions that need to be updated. This means it may skip to re-run a single Button’s composable without executing any of the composables above or below it in the UI tree.

下面是官方配套的例子：

/** * Display a list of names the user can click with a header */
    @Composable
    fun NamePicker(
        header: String,
        names: List<String>,
        onNameClicked: (String) -> Unit
    ) { 
        Column { 
            // this will recompose when [header] changes, but not when [names] changes
            Text(header, style = MaterialTheme.typography.h5)
            Divider()
    
            // LazyColumnFor is the Compose version of a RecyclerView.
            // The lambda passed is similar to a RecyclerView.ViewHolder.
            LazyColumnFor(names) {  name ->
                // When an item's [name] updates, the adapter for that item
                // will recompose. This will not recompose when [header] changes
                NamePickerItem(name, onNameClicked)
            }
        }
    }
    
    /** * Display a single name the user can click. */
    @Composable
    private fun NamePickerItem(name: String, onClicked: (String) -> Unit) { 
        Text(name, Modifier.clickable(onClick = {  onClicked(name) }))
    }

根据官方文档的介绍，当Composable函数签名中的参数不发生变化时，不应重绘，从而提高整体重绘性能。但经过测试这仅限于**调用外部Composable函数**的时候，对于内部直接调用的DSL，则无法通过参数判断是否参与重绘:

如下：

@Composable
    fun ParentComponent(
    	list: List<Data>
    ) { 
    	Log.d("compose", "render parent")
    	ChildComponent(list) 
    }
    
    @Composable
    fun ChildComponent(list :List<Data>) { 
    	Box{ 
    		Log.d("compose", "render child")
    	}
    }

由于ChildComponent签名中依赖了list，当list变化引起重绘时的日志如下

D/compose: render parent
    D/compose: render child

如果ChildComponent改为无参函数：

@Composable
    fun ParentComponent(
    	list: List<Data>
    ) { 
    	Log.d("compose", "render parent")
    	ChildComponent() 
    }
    
    @Composable
    fun ChildComponent() { 
    	Box{ 
    		Log.d("compose", "render child")
    	}
    }

D/compose: render parent

由于对list不再依赖，当list变化引起重绘时child不再重绘

# 内联组件的重绘 #

--------------------

当我们把child直接内联到parent中时：

@Composable
    fun ParentComponent(
    	list: List<Data>
    ) { 
    	Log.d("compose", "render parent")
    	Box{ 
    		Log.d("compose", "render child")
    	}
    }

D/compose: render parent
    D/compose: render child

**虽然`Box{ ... }`内部没有对list的依赖，但是仍然参与了重绘。**

按照正常的思考，一段逻辑，无论是否抽成独立的函数，应该不影响其执行时的行为。但是对于Composable函数，这里却反常识的。

# 原因猜想 #

--------------------

试着猜想一下原因：

我们知道Composable函数在编译期会生成很多逻辑代码，包括是否参与重绘的检查逻辑：仅当参数发生变化时重新执行Composable。

但是对于内联的情况，因为闭包可以随意访问外部成员，所以无法通过参数简单的判断，这会增加编译期的工作量，所以目前DSL的尾lambda中无论是否引用了变化的数据都会参与重绘。

为了验证一下猜想，我们把提出的函数加上inline试了一下：

@Composable
    fun ParentComponent(
    	list: List<Data>
    ) { 
    	Log.d("compose", "render parent")
    	ChildComponent() 
    }
    
    @Composable
    inline fun ChildComponent() { 
    	Box{ 
    		Log.d("compose", "render child")
    	}
    }

D/compose: render parent
    D/compose: render child

果不其然，添加`inline`后，即使没有参数依赖仍然参与重绘

# 最后 #

--------------------

这个不知道算不算BUG，但肯定是需要开发者注意的地方，不要**想当然的判断某些子组件或许不参与重绘**，所以在实现里加载了一些私货。任何Composable函数都要以纯函数的标准去实现，无论是否多次重绘都不影响其行为。

当然也希望官方能在未来的版本中能够对其优化，无论是否是内联组件，行为能够保持一致，避免为开发者带来困惑。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: /images/20221024/c19abbd1e64642379b9acb656d95536c.png