更新架构文档
This commit is contained in:
@@ -1400,7 +1400,7 @@ flowchart LR
|
|||||||
<li>无法精确控制重建范围</li>
|
<li>无法精确控制重建范围</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p><strong>实际案例(UUTalk):</strong></p>
|
<p><strong>实际案例:</strong></p>
|
||||||
|
|
||||||
<pre><code class="language-dart">// 整个 Container 都会重建
|
<pre><code class="language-dart">// 整个 Container 都会重建
|
||||||
Obx(() => Container(
|
Obx(() => Container(
|
||||||
@@ -1636,7 +1636,7 @@ Get.put<BaseController>(ChatController());
|
|||||||
final controller = Get.find<UserController>(); // 找到 ChatController,类型不匹配!
|
final controller = Get.find<UserController>(); // 找到 ChatController,类型不匹配!
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p><strong>运行时错误案例(UUTalk 实际问题):</strong></p>
|
<p><strong>运行时错误案例:</strong></p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Controller 未初始化</li>
|
<li>Controller 未初始化</li>
|
||||||
<li>类型转换错误</li>
|
<li>类型转换错误</li>
|
||||||
@@ -1683,16 +1683,16 @@ ChatViewModel
|
|||||||
<li>重构安全:IDE 自动提示依赖变化</li>
|
<li>重构安全:IDE 自动提示依赖变化</li>
|
||||||
<li>团队协作:依赖关系明确,不会互相影响</li>
|
<li>团队协作:依赖关系明确,不会互相影响</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h4>GetX + Obx vs Riverpod:来自 UUTalk 项目的实践教训</h4>
|
<h4>GetX + Obx vs Riverpod:实践教训</h4>
|
||||||
|
|
||||||
<div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0;">
|
<div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0;">
|
||||||
<p><strong>真实案例警示</strong></p>
|
<p><strong>典型问题示例</strong></p>
|
||||||
<p>以下内容基于 <strong>UUTalk 项目</strong>的实际经验,展示了 GetX + Obx 在大型项目中暴露的严重问题。</p>
|
<p>以下内容展示了 GetX + Obx 在大型项目中暴露的典型问题,作为选型参考。</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>1. 状态管理混乱</h5>
|
<h5>1. 状态管理混乱</h5>
|
||||||
|
|
||||||
<p><strong>UUTalk 项目的 GetX + Obx 问题代码(chat_list_controller.dart):</strong></p>
|
<p><strong>GetX + Obx 问题代码示例(chat_list_controller.dart):</strong></p>
|
||||||
|
|
||||||
<pre><code class="language-dart">class ChatListController extends GetxController {
|
<pre><code class="language-dart">class ChatListController extends GetxController {
|
||||||
var lastClickedSpecialChatId = (-1).obs;
|
var lastClickedSpecialChatId = (-1).obs;
|
||||||
@@ -1728,7 +1728,7 @@ ChatViewModel
|
|||||||
|
|
||||||
<h5>2. 过度嵌套和性能问题</h5>
|
<h5>2. 过度嵌套和性能问题</h5>
|
||||||
|
|
||||||
<p><strong>UUTalk 项目的 Obx 嵌套地狱(home_view.dart):</strong></p>
|
<p><strong>Obx 嵌套地狱示例(home_view.dart):</strong></p>
|
||||||
|
|
||||||
<pre><code class="language-dart">body: Obx(() => AnimatedPadding(
|
<pre><code class="language-dart">body: Obx(() => AnimatedPadding(
|
||||||
child: GetBuilder(
|
child: GetBuilder(
|
||||||
@@ -1765,7 +1765,7 @@ ChatViewModel
|
|||||||
|
|
||||||
<h5>3. Controller 过于臃肿</h5>
|
<h5>3. Controller 过于臃肿</h5>
|
||||||
|
|
||||||
<p><strong>UUTalk 项目的巨型 Controller:</strong></p>
|
<p><strong>巨型 Controller 反模式示例:</strong></p>
|
||||||
|
|
||||||
<pre><code class="language-dart">// chat_list_controller.dart
|
<pre><code class="language-dart">// chat_list_controller.dart
|
||||||
import 'dart:async';
|
import 'dart:async';
|
||||||
@@ -1811,7 +1811,7 @@ class ChatListController extends GetxController
|
|||||||
|
|
||||||
<h5>4. 没有编译时安全</h5>
|
<h5>4. 没有编译时安全</h5>
|
||||||
|
|
||||||
<p><strong>UUTalk 项目的运行时陷阱:</strong></p>
|
<p><strong>GetX 运行时陷阱:</strong></p>
|
||||||
|
|
||||||
<pre><code class="language-dart">// 通过字符串查找 Controller,运行时才知道对错
|
<pre><code class="language-dart">// 通过字符串查找 Controller,运行时才知道对错
|
||||||
Get.find<ChatListController>();
|
Get.find<ChatListController>();
|
||||||
@@ -1839,7 +1839,7 @@ class ChatListController extends GetxController {
|
|||||||
|
|
||||||
<h5>5. 难以测试</h5>
|
<h5>5. 难以测试</h5>
|
||||||
|
|
||||||
<p><strong>UUTalk 项目的测试困境:</strong></p>
|
<p><strong>GetX 测试困境:</strong></p>
|
||||||
|
|
||||||
<pre><code class="language-dart">// 测试时必须初始化整个 GetX 框架
|
<pre><code class="language-dart">// 测试时必须初始化整个 GetX 框架
|
||||||
testWidgets('test chat list', (tester) async {
|
testWidgets('test chat list', (tester) async {
|
||||||
@@ -1865,7 +1865,7 @@ testWidgets('test chat list', (tester) async {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>GetX + Obx vs Riverpod 实际对比(基于 UUTalk 项目经验)</h5>
|
<h5>GetX + Obx vs Riverpod 实际对比</h5>
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
@@ -1933,7 +1933,7 @@ testWidgets('test chat list', (tester) async {
|
|||||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
|
||||||
|
|
||||||
<div style="background-color: #f8d7da; border: 2px solid #dc3545; padding: 15px; border-radius: 8px;">
|
<div style="background-color: #f8d7da; border: 2px solid #dc3545; padding: 15px; border-radius: 8px;">
|
||||||
<p><strong>GetX + Obx(UUTalk 现状)</strong></p>
|
<p><strong>GetX + Obx</strong></p>
|
||||||
|
|
||||||
<p><strong>状态混乱:</strong></p>
|
<p><strong>状态混乱:</strong></p>
|
||||||
<pre><code class="language-dart">class ChatListController extends GetxController {
|
<pre><code class="language-dart">class ChatListController extends GetxController {
|
||||||
@@ -1999,10 +1999,10 @@ class ChatListViewModel extends StateNotifier<ChatListState> {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>UUTalk 项目的痛点总结</h5>
|
<h5>GetX + Obx 痛点总结</h5>
|
||||||
|
|
||||||
<div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0;">
|
<div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0;">
|
||||||
<p>从 UUTalk 项目的实际经验中,我们总结出 GetX + Obx 的核心问题:</p>
|
<p>从实践经验中,我们总结出 GetX + Obx 的核心问题:</p>
|
||||||
<ol>
|
<ol>
|
||||||
<li><strong>"快速开发"变成"技术债"</strong>:初期确实快,但 6 个月后代码无法维护</li>
|
<li><strong>"快速开发"变成"技术债"</strong>:初期确实快,但 6 个月后代码无法维护</li>
|
||||||
<li><strong>"响应式"变成"性能杀手"</strong>:Obx 嵌套导致过度重建,页面卡顿</li>
|
<li><strong>"响应式"变成"性能杀手"</strong>:Obx 嵌套导致过度重建,页面卡顿</li>
|
||||||
@@ -2014,7 +2014,7 @@ class ChatListViewModel extends StateNotifier<ChatListState> {
|
|||||||
|
|
||||||
<div style="background-color: #d4edda; border-left: 4px solid #28a745; padding: 15px; margin: 20px 0;">
|
<div style="background-color: #d4edda; border-left: 4px solid #28a745; padding: 15px; margin: 20px 0;">
|
||||||
<p><strong>Riverpod 的技术优势</strong></p>
|
<p><strong>Riverpod 的技术优势</strong></p>
|
||||||
<p>基于 UUTalk 项目的实践教训,我们选择 Riverpod 作为新架构的状态管理方案,因为它从根本上解决了 GetX 的所有问题:</p>
|
<p>基于以上实践教训,我们选择 Riverpod 作为新架构的状态管理方案,因为它从根本上解决了 GetX 的所有问题:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>编译时安全</strong>:不会再有运行时崩溃</li>
|
<li><strong>编译时安全</strong>:不会再有运行时崩溃</li>
|
||||||
<li><strong>结构化状态</strong>:@freezed 强制统一状态结构</li>
|
<li><strong>结构化状态</strong>:@freezed 强制统一状态结构</li>
|
||||||
|
|||||||
Reference in New Issue
Block a user