30. Compose性能优化 (持续更新中)

最终要义 减少recompose

1. 如果有背景色动态改变的，尽可能用drawRec来完成

   .drawBehind { 
      drawRect(your code)
    }
   

2. LazyColumn 要使用key，key注意不要重复否则会崩溃，state变量要尽可能的少

3. 如果有其他变量受remember变量影响 要使用derivedStateOf来包装

    var tWidth by remember {
        mutableStateOf(变量1)
    }
   
    val widthSp = remember {
       derivedStateOf {
          变量1+“data”
        }
     }
   

4. 如果compose的方法参数中有state变量 请使用lamda来完成变量的赋值

   @Composable
   fun ShowText(str:()->Unit){
   	Text(text = str())
   }
   

5. key

   data class VideoFeed(
       val id: String,
       val username: String,
       val backgroundColor: Color
   )
   
   @Composable
   fun CustomGrid(
       feeds: List<VideoFeed>,
       modifier: Modifier = Modifier
   ) {
       val firstRowFeeds = remember(feeds) {
           feeds.take(2)
       }
       val secondRowTracks = remember(feeds) {
           feeds.takeLast(1)
       }
       Column(
           modifier = modifier,
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           Row(
               modifier = Modifier.fillMaxWidth(),
               horizontalArrangement = Arrangement.Center
           ) {
               firstRowFeeds.forEach { feed ->
                   key(feed.id) {
                       VideoFeedView(feed = feed)
                   }
               }
           }
           Row(
               modifier = Modifier.fillMaxWidth(),
               horizontalArrangement = Arrangement.Center
           ) {
               secondRowTracks.forEach { feed ->
                   key(feed.id) {
                       VideoFeedView(feed = feed)
                   }
               }
           }
       }
   }
   
   @Composable
   fun VideoFeedView(
       feed: VideoFeed,
       modifier: Modifier = Modifier
   ) {
       Box(
           modifier = modifier
               .size(150.dp)
               .clip(RoundedCornerShape(10.dp))
               .background(feed.backgroundColor)
       ) {
           Text(text = feed.username)
       }
   }
   

6. ::方法的使用

   class MainViewModel: ViewModel() {
   
       var color by mutableStateOf(Color.Red)
           private set
   
       fun changeColor(color: Color) {
           this.color = color
       }
   
   }
   
   RgbSelector(
   	color = viewModel.color,
   	onColorClick = {
   	 	color::changeColor
   	}
   )