fix: delete target incorrect

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

Hide file tree

Showing 4 changed files with 107 additions and 140 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)
  }

diff --git a/packages/reactive/src/tracker.ts b/packages/reactive/src/tracker.ts
@@ -38,16 +38,16 @@ export class Tracker {
  ReactionStack.pop()
 
  const key = this.track._updateKey
+ const target = this.track._updateTarget
  if (key) {
- const keys =
- this.track._boundary.get(this.track._updateTarget) || new Set([])
+ const keys = this.track._boundary.get(target) || new Set([])
  keys.add(key)
- this.track._boundary.set(this.track._updateTarget, keys)
+ this.track._boundary.set(target, keys)
  }
 
  batchEnd()
 
- const keys = this.track._boundary.get(this.track._updateTarget)
+ const keys = this.track._boundary.get(target)
  if (keys) {
  keys.delete(key)
  }