【SwiftUI优化】几种View视图结构的基本性能优化

View是构建UI的基本元素，当我们开发一个复杂UI的时候，对于视图层次控制、代码控制、可维护性、性能等都是有一定的要求的，所以本文就对视图的优化做一下基本的入门介绍。

SwiftUI为我们提供了一个非常快速且易于使用的扩散算法，这是一种线性操作。这意味着对于简单的布局来说，将可以非常快的渲染，对于复杂的布局来说可能需要一些时间。SwiftUI允许使用自定义逻辑替换独立的差异算法。我们将讨论使用等效修饰符优化我们的SwiftUI布局。

视图有一个生命周期。在我们的应用程序运行期间，这个循环会不断监听让其继续循环。 每当更改视图的数据驱动来源时，如：@State或@ObservableObject的值变更导致的UI重建，SwiftUI都会重建var body 属性以生成新的body属性。SwiftUI将重建后的新视图呈现到屏幕上。而计算新body的过程取决于视图层次结构有多深（复杂度）。幸运的是，只要我们知道确定更改的更好方法，我们就可以用简化版本取代SwiftUI差异。 

了解了SwiftUI重建视图的基本原理我们就可以着手这个特色对视图做基本的优化工作了。

 一、模块化视图

我们可以将视图看着一个个的乐高拼图，将复杂的视图使用模块的方法精减合并。比如我们有下面这个视图：

struct Neter: View {
    var body: some View {
        VStack{            
            Text("网络人")
                .lineLimit(0)
                .font(.largeTitle)
                .foregroundColor(.red)
                .multilineTextAlignment(.center)
            
            Text("55mx.com")
                .font(.body)
                .foregroundColor(.gray)
                .multilineTextAlignment(.center)
        }
    }
}

模块化结果如下：

struct Neter: View {
    var body: some View {
        VStack{
            siteName
            siteURL
        }
    }
    private var siteName:some View{
        Text("网络人")
            .lineLimit(0)
            .font(.largeTitle)
            .foregroundColor(.red)
            .multilineTextAlignment(.center)
    }
    private var siteURL:some View{
        Text("55mx.com")
            .font(.body)
            .foregroundColor(.gray)
            .multilineTextAlignment(.center)
    }
}

虽然模块化了 。但是代码还增加了，这时候我们可以使用函数处理：

struct Neter: View {
    var body: some View {
        VStack{
            sitInfo("网络人",color: .red,font: .largeTitle)
            sitInfo("55mx.com",color: .gray,font: .body)
        }
    }
    private func sitInfo(_ value:String,color: Color,font:Font) -> some View{
        Text(value)
            .lineLimit(0)
            .font(font)
            .foregroundColor(color)
            .multilineTextAlignment(.center)
    }
}

虽然函数相比变量开销会大一点，但代码复用上的优势马上就出来了。

二，使用扩展合并通用设置

同样是上面的代码，我们可以使用扩展的方式来优化代码： 

struct Neter: View {
    var body: some View {
        VStack{
            Text("网络人")
                .siteInfo(color: .red,font:.largeTitle)
            Text("55mx.com")
                .siteInfo(color: .gray,font:.body)
        }
    }
}
extension View {
    func siteInfo(color: Color,font:Font) -> some View{
        self
            .lineLimit(0)
            .font(font)
            .foregroundColor(color)
            .multilineTextAlignment(.center)
    }
}

我们直接扩展View的功能，就可以完成上面一样的工作，可以根据自己的喜好或者项目通用性组合使用。

三、使用ViewModifier

专业的事可以交换给专业的人做，如果我们仅针对样式进行修改，可以尝试使用ViewModifier来实现上面一样的功能。 

struct Neter: View {
    var body: some View {
        VStack{
            Text("网络人")
                .modifier(siteInfo(color: .red,font:.largeTitle))
            Text("55mx.com")
                .modifier(siteInfo(color: .gray,font:.body))
                
        }
    }
}
    //视图修改器
struct siteInfo: ViewModifier{
    let color:Color
    let font:Font
    func body(content: Content) -> some View {
        content
            .lineLimit(0)
            .font(font)
            .foregroundColor(color)
            .multilineTextAlignment(.center)
        
    }
}

ViewModifier更强大，可以定义各种样式。这里仅做简单的演示。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/180