通过组件降级优化Flutter组件树

组件降级，就是通过更换最小的部件替代现有组件来完成优化。这样的优化不起眼，但是在重大的组件树面前，组件的不断复用，为应用节省的构建开支是非常大的。对Flutter组件生态不熟悉的用户，没有全面了解所有组件，为了实现一个功能，调用了一些本可以简化的组件，导致应用构建开销很大。所以这就是为什么别人的Flutter应用，和原生体验接近，而你的路由过度就掉帧。

Container的降级

很多人一上来就使用Container，最后只用到一个属性，那就是color。
将下面使用Container的组件进行降级：

Container(
  decoration: const BoxDecoration(
    color: Colors.red
  ),
  child: const Text("Hello world"),
);

降级后

const ColoredBox(
  color: Colors.red,
  child: Text("Hello world"),
);

这何尝不是一种超级简单的降级，所以当你只使用部分属性的时候，你可以了解是否有组件可以直接使用这些属性。

Container(
  constraints: const BoxConstraints(maxWidth: 10),
  child: const Text(
    "HELLO",
  ),
);
// 降级后
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 10),
  child: const Text(
    "HELLO",
  ),
);

这其中，还有Padding, DecoratedBox都是很常用的组件，所以你可以先了解这些组件，然后使用这些组件的属性，而避免直接使用Container。

降级到StatelessWidget

有时候，你使用了一个StatefulWidget，但是其实StatelessWidget同样可以被更新UI，比如你使用Provider或者FutureBuilder时，完全没有必要使用一个StatefulWidget，你可以直接使用StatelessWidget。

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<LoginUserProvier>(builder:
      (BuildContext context, LoginUserProvier loginUser,
          Widget? child) {
        return Switch.adaptive(
        value: loginUser.user!.privacySettings.fans,
        onChanged: (bool val) async {
          /// doSomething
        });
    });
  }
}

当状态发生变化时，UI同样被刷新了。

替换和条件渲染降级

在Flutter中，组件的降级是一种处理异常或错误情况的方法。当某个操作失败或出现错误时，可以使用降级来替代原始组件，并显示一个备用的UI来提供更好的用户体验。

下面是两种常见的降级方法：

1. 使用ErrorWidget：ErrorWidget是Flutter内置的小部件，用于显示错误的UI。当某个组件出现异常或错误时，可以使用ErrorWidget将其替代，并显示自定义的错误信息。

ErrorWidgetBuilder errorWidgetBuilder = (FlutterErrorDetails errorDetails) {
  return Center(
    child: Text('An error occurred'),
  );
};

MaterialApp(
  // ...
  builder: (BuildContext context, Widget child) {
    ErrorWidget.builder = errorWidgetBuilder;
    return child;
  },
)

在上面的代码中，将MaterialApp的builder属性设置为一个回调函数，该函数用于构建应用程序的根小部件。在回调函数中，将ErrorWidget.builder设置为一个ErrorWidgetBuilder，当发生错误时，默认的错误小部件将被替换为自定义的错误UI。

2. 使用条件渲染：另一种常见的方式是使用条件渲染。根据某个条件的结果，在构建UI时选择性地渲染不同的组件。

bool hasError = false;

Widget build(BuildContext context) {
  if (hasError) {
    return Text('An error occurred');
  } else {
    return MyWidget();  // 原始组件
  }
}

在上述示例中，根据hasError变量的值，选择性地渲染不同的组件。如果hasError为true，则渲染错误信息的小部件；如果为false，则渲染原始的组件。

通过使用降级的方法，可以在组件出错或异常时提供一个备选的UI，以提高应用程序的健壮性和用户体验。根据具体的情况，可以选择合适的降级方法，并根据需求进行自定义。