From 70094beb7878d51c81bfaf766e85c8d0e1071641 Mon Sep 17 00:00:00 2001 From: janrywang Date: Tue, 14 Apr 2020 22:49:01 +0800 Subject: [PATCH] feat(core): remove initializeLazySyncState --- docs/zh-cn/jsx-develop/performance.md | 25 ------ docs/zh-cn/schema-develop/performance.md | 25 ------ packages/core/src/index.ts | 77 ++++++------------- packages/core/src/types.ts | 1 - .../src/hooks/useSchemaForm.ts | 1 - packages/react/src/types.ts | 1 - 6 files changed, 25 insertions(+), 105 deletions(-) diff --git a/docs/zh-cn/jsx-develop/performance.md b/docs/zh-cn/jsx-develop/performance.md index 8b154289370..cbcb89282db 100644 --- a/docs/zh-cn/jsx-develop/performance.md +++ b/docs/zh-cn/jsx-develop/performance.md @@ -85,28 +85,3 @@ onFieldValueChange$('aa').subscribe(() => { - aa 值变化时触发 bb 所有子节点隐藏 - 使用 hostUpdate 包装，可以在当前操作中阻止精确更新策略，在所有字段状态更新完毕之后直接走根组件重渲染策略，从而起到合并渲染的目的 - -## 表单初始化渲染卡顿问题 - -因为 Formily 内部维护了一棵状态树，初始化阶段，会频繁同步状态树，用来保证实时幂等，但这样带来的问题就是整体计算压力比较大，如果在一些比较老旧的浏览器，比如 IE11 上，就很难带动起来，节点数量越多，首次渲染会越卡顿，这个没法避免，所以，我们考虑给 Formily 支持一个参数 `initializeLazySyncState`，用于解决首次渲染的惰性同步状态，但是开启之后，肯定会存在一些副作用问题，比如： - -```js -onFieldValueChange$().subscribe(() => { - const values = actions.getFormState(state => state.values) - //初始化阶段基于当前表单的某个值去做一些处理 -}) -``` - -开启`initializeLazySyncState` - -```js - - ... - - -or - -
- ... -
-``` diff --git a/docs/zh-cn/schema-develop/performance.md b/docs/zh-cn/schema-develop/performance.md index 698c3be16af..f2d0fd8f901 100644 --- a/docs/zh-cn/schema-develop/performance.md +++ b/docs/zh-cn/schema-develop/performance.md @@ -86,28 +86,3 @@ onFieldValueChange$('aa').subscribe(() => { - aa 值变化时触发 bb 所有子节点隐藏 - 使用 hostUpdate 包装，可以在当前操作中阻止精确更新策略，在所有字段状态更新完毕之后直接走根组件重渲染策略，从而起到合并渲染的目的 - -## 表单初始化渲染卡顿问题 - -因为 Formily 内部维护了一棵状态树，初始化阶段，会频繁同步状态树，用来保证实时幂等，但这样带来的问题就是整体计算压力比较大，如果在一些比较老旧的浏览器，比如 IE11 上，就很难带动起来，节点数量越多，首次渲染会越卡顿，这个没法避免，所以，我们考虑给 Formily 支持一个参数 `initializeLazySyncState`，用于解决首次渲染的惰性同步状态，但是开启之后，肯定会存在一些副作用问题，比如： - -```js -onFieldValueChange$().subscribe(() => { - const values = actions.getFormState(state => state.values) - //初始化阶段基于当前表单的某个值去做一些处理 -}) -``` - -开启`initializeLazySyncState` - -```js - - ... - - -or - -
- ... -
-``` diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 66d061b594d..d6f08f927c1 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -11,8 +11,7 @@ import { FormPathPattern, BigData, each, - isObj, - scheduler + isObj } from '@formily/shared' import { FormValidator, @@ -264,20 +263,6 @@ export function createForm( const errorsChanged = field.isDirty('errors') const editableChanged = field.isDirty('editable') - const initializeLazy = (callback: () => void) => { - if (options.initializeLazySyncState) { - if (initialValueChanged) { - scheduler.applyWithIdlePriority(() => { - callback() - }) - } else { - callback() - } - } else { - callback() - } - } - if (initializedChanged) { heart.publish(LifeCycleTypes.ON_FIELD_INIT, field) const isEmptyValue = !isValid(published.value) @@ -301,19 +286,15 @@ export function createForm( published.visible == false || published.unmounted === true if (valueChanged) { if (!wasHidden) { - initializeLazy(() => { - setFormValuesIn(path, published.value, true) - notifyTreeFromValues() - }) + setFormValuesIn(path, published.value, true) + notifyTreeFromValues() } heart.publish(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, field) } if (initialValueChanged) { if (!wasHidden) { - initializeLazy(() => { - setFormInitialValuesIn(path, published.initialValue, true) - notifyTreeFromInitialValues() - }) + setFormInitialValuesIn(path, published.initialValue, true) + notifyTreeFromInitialValues() } heart.publish(LifeCycleTypes.ON_FIELD_INITIAL_VALUE_CHANGE, field) } @@ -325,22 +306,18 @@ export function createForm( state.visibleCacheValue = published.value }) } - initializeLazy(() => { - deleteFormValuesIn(path) - notifyTreeFromValues() - }) + deleteFormValuesIn(path) + notifyTreeFromValues() } else { if (!existFormValuesIn(path)) { - initializeLazy(() => { - setFormValuesIn( - path, - isValid(published.visibleCacheValue) - ? published.visibleCacheValue - : published.initialValue, - true - ) - notifyTreeFromValues() - }) + setFormValuesIn( + path, + isValid(published.visibleCacheValue) + ? published.visibleCacheValue + : published.initialValue, + true + ) + notifyTreeFromValues() } } } @@ -366,22 +343,18 @@ export function createForm( state.visibleCacheValue = published.value }) } - initializeLazy(() => { - deleteFormValuesIn(path, true) - notifyTreeFromValues() - }) + deleteFormValuesIn(path, true) + notifyTreeFromValues() } else { if (!existFormValuesIn(path)) { - initializeLazy(() => { - setFormValuesIn( - path, - isValid(published.visibleCacheValue) - ? published.visibleCacheValue - : published.initialValue, - true - ) - notifyTreeFromValues() - }) + setFormValuesIn( + path, + isValid(published.visibleCacheValue) + ? published.visibleCacheValue + : published.initialValue, + true + ) + notifyTreeFromValues() } } heart.publish(LifeCycleTypes.ON_FIELD_UNMOUNT, field) diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 1561b22601f..1cac51355a4 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -253,7 +253,6 @@ export interface IFormStateProps { values?: {} lifecycles?: FormLifeCycle[] useDirty?: boolean - initializeLazySyncState?: boolean editable?: boolean | ((name: string) => boolean) validateFirst?: boolean } diff --git a/packages/react-schema-renderer/src/hooks/useSchemaForm.ts b/packages/react-schema-renderer/src/hooks/useSchemaForm.ts index 278fe04c52c..62b393fbf81 100644 --- a/packages/react-schema-renderer/src/hooks/useSchemaForm.ts +++ b/packages/react-schema-renderer/src/hooks/useSchemaForm.ts @@ -60,7 +60,6 @@ const useInternalSchemaForm = (props: ISchemaFormProps) => { onSubmit, onReset, onValidateFailed, - initializeLazySyncState, useDirty, children, expressionScope, diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index cb455970d8b..1c17d088dbd 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -58,7 +58,6 @@ export interface IFormProps< | ((form: IForm) => React.ReactElement) useDirty?: boolean editable?: boolean | ((name: string) => boolean) - initializeLazySyncState?: boolean validateFirst?: boolean }