fix: delete target incorrect

alibaba · Jul 23, 2023 · d97dfa0 · d97dfa0
1 parent 4c7a748
commit d97dfa0
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 136 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -1,132 +1 @@
----
-title: Formily - Alibaba unified front-end form solution
-order: 10
-hero:
-  title: Alibaba Formily
-  desc: Alibaba Unified Front-end Form Solution
-  actions:
-    - text: Introduction
-      link: /guide
-    - text: Quick start
-      link: /guide/quick-start
-features:
-  - icon: https://img.alicdn.com/imgextra/i2/O1CN016i72sH1c5wh1kyy9U_!!6000000003550-55-tps-800-800.svg
-    title: Easier to Use
-    desc: Out of the box, rich cases
-  - icon: https://img.alicdn.com/imgextra/i1/O1CN01bHdrZJ1rEOESvXEi5_!!6000000005599-55-tps-800-800.svg
-    title: More Efficient
-    desc: Fool writing, ultra-high performance
-  - icon: https://img.alicdn.com/imgextra/i3/O1CN01xlETZk1G0WSQT6Xii_!!6000000000560-55-tps-800-800.svg
-    title: More Professional
-    desc: Complete, flexible and elegant
-footer: Open-source MIT Licensed | Copyright © 2019-present<br />Powered by self
----
-
-```tsx
-/**
- * inline: true
- */
-import React from 'react'
-import { Section } from './site/Section'
-import './site/styles.less'
-
-export default () => (
-  <Section
-    title="Fool Writing, Ultra-high Performance"
-    style={{ marginTop: 40 }}
-    titleStyle={{ paddingBottom: 100, fontWeight: 'bold' }}
-  >
-    <iframe
-      className="codesandbox"
-      src="https://codesandbox.io/embed/formilyyaliceshi-vbu4w?fontsize=12&module=%2FApp.tsx&theme=dark"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-    ></iframe>
-  </Section>
-)
-```
-
-```tsx
-/**
- * inline: true
- */
-import React from 'react'
-import { Section } from './site/Section'
-import './site/styles.less'
-
-export default () => (
-  <Section
-    title="Form Builder,Efficient Development"
-    style={{ marginTop: 140, fontWeight: 'bold' }}
-    titleStyle={{ paddingBottom: 140 }}
-    scale={1.2}
-  >
-    <a href="//designable-antd.formilyjs.org" target="_blank" rel="noreferrer">
-      <img src="//img.alicdn.com/imgextra/i2/O1CN01eI9FLz22tZek2jv7E_!!6000000007178-2-tps-3683-2272.png" />
-    </a>
-  </Section>
-)
-```
-
-```tsx
-/**
- * inline: true
- */
-import React from 'react'
-import { Section } from './site/Section'
-import './site/styles.less'
-
-export default () => (
-  <Section
-    title="Pure Core, More Extensibility"
-    style={{ marginTop: 140 }}
-    titleStyle={{ paddingBottom: 100, fontWeight: 'bold' }}
-  >
-    <a href="//core.formilyjs.org" target="_blank" rel="noreferrer">
-      <img src="//img.alicdn.com/imgextra/i4/O1CN019qbf1b1ChnTfT9x3X_!!6000000000113-55-tps-1939-1199.svg" />
-    </a>
-  </Section>
-)
-```
-
-```tsx
-/**
- * inline: true
- */
-import React from 'react'
-import { Section } from './site/Section'
-import { Contributors } from './site/Contributors'
-import './site/styles.less'
-
-export default () => (
-  <Section
-    title="Active Community & Genius People"
-    style={{ marginTop: 100 }}
-    titleStyle={{ paddingBottom: 140, fontWeight: 'bold' }}
-  >
-    <Contributors />
-  </Section>
-)
-```
-
-```tsx
-/**
- * inline: true
- */
-import React from 'react'
-import { Section } from './site/Section'
-import { QrCode, QrCodeGroup } from './site/QrCode'
-import './site/styles.less'
-
-export default () => (
-  <Section
-    title="High-Quality Community Group"
-    style={{ marginTop: 140 }}
-    titleStyle={{ paddingBottom: 20, fontWeight: 'bold' }}
-  >
-    <QrCodeGroup>
-      <QrCode link="//img.alicdn.com/imgextra/i1/O1CN011zlc5b1uu1BDUpNg1_!!6000000006096-2-tps-978-1380.png" />
-    </QrCodeGroup>
-  </Section>
-)
-```
+<code src="./index" />
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+
+import { autorun, batch, reaction, observable } from '@formily/reactive'
+
+const fieldA = observable({
+  value: '',
+  visible: true,
+})
+
+const fieldB = observable({
+  value: '',
+  visible: true,
+  cache: '',
+})
+
+const fieldC = observable({
+  value: '',
+  visible: true,
+  cache: '',
+})
+
+// ===== fieldB reaction =====
+reaction(
+  () => fieldB.value,
+  () => {
+    if (fieldB.value && fieldB.visible === false) {
+      fieldB.cache = fieldB.value
+      // 删除 fieldB.value 时，会重新 runReaction
+      delete fieldB.value
+    }
+  }
+)
+
+reaction(
+  () => fieldB.visible,
+  () => {
+    if (fieldB.visible === true) {
+      // debugger
+      console.log('fieldB.cache: ', fieldB.cache)
+      // 执行到这里时，不会执行 fieldB.value 的 autorun，因为在上面 delete fieldB.value 时，已经执行了
+      fieldB.value = fieldB.cache
+    }
+  }
+)
+
+// ===== fieldC reaction =====
+reaction(
+  () => fieldC.value,
+  () => {
+    if (fieldC.value && fieldC.visible === false) {
+      fieldC.cache = fieldC.value
+      delete fieldC.value
+    }
+  }
+)
+
+reaction(
+  () => fieldC.visible,
+  () => {
+    if (fieldC.visible === true) {
+      fieldC.value = fieldC.cache
+    }
+  }
+)
+
+// ===== schema 渲染 =====
+autorun(() => {
+  fieldB.visible = fieldA.value === 'fieldA'
+}, 'A')
+
+autorun(() => {
+  fieldC.visible = fieldB.value === 'fieldB'
+}, 'B')
+
+// fieldB.value = 'fieldB'
+// fieldC.value = 'fieldC'
+// fieldA.value = 'fieldA'
+
+batch(() => {
+  fieldB.value = 'fieldB'
+  fieldC.value = 'fieldC'
+  // debugger
+  fieldA.value = 'fieldA'
+  // window.xxx = true
+})
+
+console.log(
+  'fieldA.visible:',
+  fieldA.visible,
+  'fieldB.visible:',
+  fieldB.visible,
+  'fieldC.visible:',
+  fieldC.visible
+)
+
+const App = () => <div>123123</div>
+
+export default App
diff --git a/packages/reactive/src/autorun.ts b/packages/reactive/src/autorun.ts
@@ -33,16 +33,16 @@ export const autorun = (tracker: Reaction, name = 'AutoRun') => {
         ReactionStack.pop()
 
         const key = reaction._updateKey
+        const target = reaction._updateTarget
         if (key) {
-          const keys =
-            reaction._boundary.get(reaction._updateTarget) || new Set([])
+          const keys = reaction._boundary.get(target) || new Set([])
           keys.add(key)
-          reaction._boundary.set(reaction._updateTarget, keys)
+          reaction._boundary.set(target, keys)
         }
 
         batchEnd()
 
-        const keys = reaction._boundary.get(reaction._updateTarget)
+        const keys = reaction._boundary.get(target)
         if (keys) {
           keys.delete(key)
         }