chore: 调整全局变量更新机制使得组件层无须额外编写检测代码

2betop · 2betop · commit ebaba0963081 · 2025-04-15T10:52:52.000+08:00
diff --git a/packages/amis-core/src/SchemaRenderer.tsx b/packages/amis-core/src/SchemaRenderer.tsx
@@ -42,6 +42,8 @@ import {evalExpression, filter} from './utils/tpl';
 import Animations from './components/Animations';
 import {cloneObject} from './utils/object';
 import {observeGlobalVars} from './globalVar';
+import type {IRootStore} from './store/root';
+import {createObjectFromChain, extractObjectChain} from './utils';
 
 interface SchemaRendererProps
   extends Partial<Omit<RendererProps, 'statusStore'>>,
@@ -185,17 +187,37 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
 
   handleGlobalVarChange() {
     const handler = this.renderer?.onGlobalVarChanged;
-    const newData = cloneObject(this.props.data);
+    const topStore: IRootStore = this.props.topStore;
+    const chain = extractObjectChain(this.props.data).map((item: any) =>
+      item.hasOwnProperty('global') || item.hasOwnProperty('globalState')
+        ? {
+            ...topStore.nextGlobalData,
+            __globalVarChanged: true,
+            __globalVarChangedAt: Date.now()
+          }
+        : item
+    );
+    const newData = createObjectFromChain(chain);
 
     // 如果渲染器自己做了实现，且返回 false，则不再继续往下执行
     if (handler?.(this.cRef, this.props.schema, newData) === false) {
       return;
     }
 
+    // 强制刷新并通过一个临时对象让下发给组件的全局变量更新
+    // 等 react 完成一轮渲染后，将临时渲染切成正式渲染
+    // 也就是说删掉临时对象，后续渲染读取真正变更后的全局变量
+    //
+
+    // 为什么这么做？因为很多组件内部都会 diff  this.props.data 和 prevProps.data
+    // 如果对应的数据没有发生变化，则会跳过组件状态的更新
     this.tmpData = newData;
-    this.forceUpdate(() => {
-      delete this.tmpData;
-    });
+    topStore.addSyncGlobalVarStatePendingTask(
+      callback => this.forceUpdate(callback),
+      () => {
+        delete this.tmpData;
+      }
+    );
   }
 
   resolveRenderer(props: SchemaRendererProps, force = false): any {
@@ -369,6 +391,9 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       return render!($path, schema as any, rest) as JSX.Element;
     }
 
+    // 用于全局变量刷新
+    (rest as any).data = this.tmpData || rest.data;
+
     const detectData =
       schema &&
       (schema.detectField === '&' ? rest : rest[schema.detectField || 'data']);
@@ -548,9 +573,6 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       mobileUI: schema.useMobileUI === false ? false : rest.mobileUI
     };
 
-    // 用于全局变量刷新
-    props.data = this.tmpData || props.data;
-
     // style 支持公式
     if (schema.style) {
       (props as any).style = buildStyle(schema.style, detectData);
diff --git a/packages/amis-core/src/WithStore.tsx b/packages/amis-core/src/WithStore.tsx
@@ -19,6 +19,7 @@ import {
 } from './utils/helper';
 import {dataMapping, tokenize} from './utils/tpl-builtin';
 import {RootStoreContext} from './WithRootStore';
+import {extractObjectChain} from './utils/object';
 
 /**
  * 忽略静态数据中的 schema 属性
@@ -388,6 +389,18 @@ export function HocStoreFactory(renderer: {
             props.data?.__changeReason
           );
         }
+
+        if (
+          props.data?.__globalVarChangedAt &&
+          prevProps.data?.__globalVarChangedAt !==
+            props.data?.__globalVarChangedAt
+        ) {
+          const globalVar = {
+            global: props.data.global,
+            globalState: props.data.globalState
+          };
+          globalVar && store.updateGlobalVars(globalVar);
+        }
       }
 
       componentWillUnmount() {
diff --git a/packages/amis-core/src/globalVar.ts b/packages/amis-core/src/globalVar.ts
@@ -9,6 +9,7 @@ import {isExpression} from './utils/formula';
 import {reaction} from 'mobx';
 import {resolveVariableAndFilter} from './utils/resolveVariableAndFilter';
 import {IRootStore} from './store/root';
+import isPlainObject from 'lodash/isPlainObject';
 
 /**
  * 全局变量的定义
@@ -298,6 +299,17 @@ export function observeGlobalVars(
         key,
         value
       });
+    } else if (isPlainObject(value) && !value.type) {
+      // 最多支持两层，多了可能就会有性能问题了
+      // 再多一层主要是为了支持某些 api 配置的是对象形式
+      Object.keys(value).forEach(k => {
+        if (isGlobalVarExpression(value[k])) {
+          expressions.push({
+            key: `${key}.${k}`,
+            value: value[k]
+          });
+        }
+      });
     } else if (
       [
         'items',
@@ -338,7 +350,7 @@ export function observeGlobalVars(
           exp =>
             `${exp.key}:${resolveVariableAndFilter(
               exp.value,
-              topStore.downStream,
+              topStore.nextGlobalData,
               '| json' // 如果用了复杂对象，要靠这个来比较
             )}`
         )
diff --git a/packages/amis-core/src/renderers/Item.tsx b/packages/amis-core/src/renderers/Item.tsx
@@ -2363,24 +2363,7 @@ export function registerFormItem(config: FormItemConfig): RendererConfig {
     ...config,
     weight: typeof config.weight !== 'undefined' ? config.weight : -100, // 优先级高点
     component: Control as any,
-    isFormItem: true,
-    onGlobalVarChanged: function (instance, schema, data): any {
-      if (config.onGlobalVarChanged?.apply(this, arguments) === false) {
-        return false;
-      }
-
-      if (isGlobalVarExpression(schema.source)) {
-        (instance.props as any).reloadOptions?.();
-      }
-
-      // 目前表单项的全局变量更新要靠这个方式
-      if (isGlobalVarExpression(schema.value)) {
-        (instance.props as any).onChange(
-          resolveVariableAndFilter(schema.value, data, '| raw')
-        );
-        return false;
-      }
-    }
+    isFormItem: true
   });
 }
 
diff --git a/packages/amis-core/src/store/iRenderer.ts b/packages/amis-core/src/store/iRenderer.ts
@@ -97,6 +97,15 @@ export const iRendererStore = StoreNode.named('iRendererStore')
         self.upStreamData = data;
       },
 
+      updateGlobalVars(globalVar: any) {
+        const chain = extractObjectChain(self.data).map(item =>
+          item.hasOwnProperty('global') || item.hasOwnProperty('globalState')
+            ? globalVar
+            : item
+        );
+        self.data = createObjectFromChain(chain);
+      },
+
       reset() {
         self.data = self.pristine;
       },
diff --git a/packages/amis-core/src/store/root.ts b/packages/amis-core/src/store/root.ts
@@ -27,6 +27,16 @@ export const RootStore = ServiceStore.named('RootStore')
     runtimeErrorStack: types.frozen(),
     query: types.frozen(),
     ready: false,
+
+    // 临时变更，等 react 完成一轮渲染后，将临时变更切成正式变更
+    // 主要是为了让可能需要重新渲染的部分组件可以实现 this.props.data 和 prevProps.data 不一致
+    // 因为很多组件内部会 diff this.props.data 和 prevProps.data 来决定是否更新的逻辑
+    globalVarTempStates: types.optional(
+      types.map(types.frozen<GlobalVariableState>()),
+      {}
+    ),
+
+    // 正式变更
     globalVarStates: types.optional(
       types.map(types.frozen<GlobalVariableState>()),
       {}
@@ -43,6 +53,46 @@ export const RootStore = ServiceStore.named('RootStore')
     };
   })
   .views(self => ({
+    get nextGlobalData() {
+      let globalData = {} as any;
+      let globalState = {} as any;
+
+      if (self.globalVarTempStates.size) {
+        let touched = false;
+        let saved = true;
+        let errors: any = {};
+        let initialized = true;
+        self.globalVarTempStates.forEach((state, key) => {
+          globalData[key] = state.value;
+          touched = touched || state.touched;
+          if (!state.saved) {
+            saved = false;
+          }
+
+          if (state.errorMessages.length) {
+            errors[key] = state.errorMessages;
+          }
+          if (!state.initialized) {
+            initialized = false;
+          }
+        });
+
+        globalState = {
+          fields: self.globalVarTempStates.toJSON(),
+          initialized: initialized,
+          touched: touched,
+          saved: saved,
+          errors: errors,
+          valid: !Object.keys(errors).length
+        };
+      }
+
+      return {
+        global: globalData,
+        globalState: globalState
+      };
+    },
+
     get downStream() {
       let result = self.data;
 
@@ -168,7 +218,7 @@ export const RootStore = ServiceStore.named('RootStore')
 
       if (getter) {
         await getGlobalVarData(item, context, getter);
-        const state = self.globalVarStates.get(item.key)!;
+        const state = self.globalVarTempStates.get(item.key)!;
         updateState(item.key, {
           initialized: true,
           pristine: state.value
@@ -234,7 +284,7 @@ export const RootStore = ServiceStore.named('RootStore')
             continue;
           }
 
-          const state = self.globalVarStates.get(key);
+          const state = self.globalVarTempStates.get(key);
           if (state) {
             updateState(key, {
               value: data[key],
@@ -275,7 +325,7 @@ export const RootStore = ServiceStore.named('RootStore')
       const itemsNotInitialized: Array<GlobalVariableItemFull> = [];
 
       for (let item of globalVars) {
-        let state = self.globalVarStates.get(item.key);
+        let state = self.globalVarTempStates.get(item.key);
         if (state?.initialized) {
           continue;
         }
@@ -323,8 +373,10 @@ export const RootStore = ServiceStore.named('RootStore')
         self.globalVars = yield initializeGlobalVars(newVars, updateVars);
 
         removeVars.forEach(item => {
-          self.globalVarStates.delete(item.key);
+          self.globalVarTempStates.delete(item.key);
         });
+
+        syncGlobalVarStates();
       });
 
     // 更新全局变量的值
@@ -350,7 +402,7 @@ export const RootStore = ServiceStore.named('RootStore')
         value: any;
       }
     ) => {
-      const state = self.globalVarStates.get(key);
+      const state = self.globalVarTempStates.get(key);
       if (!state) {
         return;
       }
@@ -483,7 +535,7 @@ export const RootStore = ServiceStore.named('RootStore')
       }> = [];
       const values: any = {};
       for (let varItem of self.globalVars) {
-        const state = self.globalVarStates.get(varItem.key);
+        const state = self.globalVarTempStates.get(varItem.key);
         if (!state?.touched) {
           continue;
         } else if (key && key !== varItem.key) {
@@ -536,19 +588,45 @@ export const RootStore = ServiceStore.named('RootStore')
       leading: false
     });
 
+    function syncGlobalVarStates() {
+      self.globalVarStates.clear();
+      self.globalVarTempStates.forEach((state, key) => {
+        self.globalVarStates.set(key, {...state});
+      });
+    }
+
+    let pendingCount = 0;
+    let callbacks: Array<() => void> = [];
+    function addSyncGlobalVarStatePendingTask(
+      fn: (callback: () => void) => void,
+      callback?: () => void
+    ) {
+      pendingCount++;
+      callback && callbacks.push(callback);
+      fn(() => {
+        pendingCount--;
+
+        if (pendingCount === 0) {
+          callbacks.forEach(callback => callback());
+          callbacks = [];
+          (self as any).syncGlobalVarStates();
+        }
+      });
+    }
+
     return {
       updateContext(context: any) {
         // 因为 context 不是受控属性，直接共用引用好了
         // 否则还会触发孩子节点的重新渲染
         Object.assign(self.context, context);
       },
       updateGlobalVarState(key: string, state: Partial<GlobalVariableState>) {
-        const origin = self.globalVarStates.get(key);
+        const origin = self.globalVarTempStates.get(key);
         const newState = {
           ...(origin || createGlobalVarState()),
           ...state
         };
-        self.globalVarStates.set(key, newState as any);
+        self.globalVarTempStates.set(key, newState as any);
       },
       setGlobalVars,
       updateGlobalVarValue,
@@ -565,6 +643,8 @@ export const RootStore = ServiceStore.named('RootStore')
         }
       },
       init: init,
+      syncGlobalVarStates,
+      addSyncGlobalVarStatePendingTask,
       afterDestroy() {
         lazySaveGlobalVarValues.flush();
       }
diff --git a/packages/amis-editor-core/src/variable.ts b/packages/amis-editor-core/src/variable.ts
@@ -259,15 +259,24 @@ export class VariableManager {
 
     const options = [
       ...this.getVariableOptions(),
-      ...this.getPageVariablesOptions()
+      ...this.getPageVariablesOptions(),
+      ...this.getGlobalVariablesOptions()
     ];
-    const node = findTree(
-      options,
-      item => item[valueField ?? 'value'] === path
-    );
-
+    let nodePaths: Array<any> = [];
+    const node = findTree(options, (item, key, level, paths) => {
+      if (item[valueField ?? 'value'] === path) {
+        nodePaths = paths.concat(item);
+        return true;
+      }
+      return false;
+    });
     return node
-      ? node[labelField ?? 'label'] ?? node[valueField ?? 'value'] ?? ''
+      ? nodePaths
+          .map(
+            node =>
+              node[labelField ?? 'label'] ?? node[valueField ?? 'value'] ?? ''
+          )
+          .join(' / ')
       : '';
   }
 
@@ -288,7 +297,11 @@ export class VariableManager {
       if (item.type === 'array') {
         delete item.children;
       }
+      if (item.value === 'global') {
+        item.disabled = true;
+      }
     });
+
     return options;
   }
 }
diff --git a/packages/amis/src/renderers/Tabs.tsx b/packages/amis/src/renderers/Tabs.tsx
