Skip to content

Commit

Permalink
perf(dep): 关联性能优化
Browse files Browse the repository at this point in the history 
- [email protected]
  • Loading branch information
@xz8la8
xz8la8 committed Apr 6, 2021
1 parent 7b268ca commit 2298baf
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 33 deletions.
30 changes: 20 additions & 10 deletions docs/private/editable2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,21 +106,31 @@ export default class Editable2Demo extends React.Component {
relates: ['province'],
defaultOutput: [],
type: (ctx) => {
// console.log(ctx.name, '请求')
console.log(ctx.name, '请求');
const value = ctx.values[0];

let source;
if(value === 'zhejiang') {
source = [{text: '杭州', value: 'hangzhou'}];
} else if(value === 'jiangsu') {
source = [{text: '南京', value: 'nanjing'}];
} else if(value === 'hubei') {
source = [{text: '武汉', value: 'wuhan'}];
if (value === 'zhejiang') {
source = [
{ text: '杭州', value: 'hangzhou' },
{ text: '宁波', value: 'ningbo' },
];
} else if (value === 'jiangsu') {
source = [
{ text: '南京', value: 'nanjing' },
{ text: '苏州', value: 'suzhou' },
];
} else if (value === 'hubei') {
source = [
{ text: '武汉', value: 'wuhan' },
{ text: '荆州', value: 'jiangzhou' },
];
}

source && ctx.form.setFieldSource(ctx.name, source);
}
}
}
},
},
},
},
{
width: 150,
Expand Down
2 changes: 1 addition & 1 deletion packages/sula/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sula",
"version": "1.2.0-beta.51",
"version": "1.2.0-beta.52",
"module": "./es/index.js",
"main": "./es/index.js",
"types": "./es/index.d.ts",
Expand Down
19 changes: 18 additions & 1 deletion packages/sula/src/form/Field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { Form as AForm, Col } from 'antd';
import { needWrapCols } from './utils/layoutUtil';
import FormDependency from './dependency';
import { ItemLayout, Layout } from './FieldGroup';
import { matchNameList } from '../_util/NameListMap';

const FormItem = AForm.Item;

Expand Down Expand Up @@ -70,7 +71,13 @@ export default class Field extends React.Component<FieldProps> {

private cancelRegisterField: () => void | null = null;

private prevName: FieldNamePath;

public mountedAndNeverUpdate: boolean = false;

componentDidMount() {
this.mountedAndNeverUpdate = true;

if (!this.props.name) {
return;
}
Expand Down Expand Up @@ -98,10 +105,16 @@ export default class Field extends React.Component<FieldProps> {
}

componentDidUpdate(prevProps: FieldProps) {
this.mountedAndNeverUpdate = false;
if (!this.props.name) {
return;
}
if (this.props.fieldKey && this.props.fieldKey !== prevProps.fieldKey) {

/**
* fieldKey 代表是动态表单项，如果更新前后两次name不一样，说明只是在values的位置上发生改变（上面增加了，或者删除了）
*/
if (this.props.fieldKey && !matchNameList(toArray(this.props.name), toArray(prevProps.name))) {
this.prevName = prevProps.name!;
const {
linkFieldNameAndFieldKey,
unlinkFieldNameAndFieldKey,
Expand Down Expand Up @@ -177,6 +190,10 @@ export default class Field extends React.Component<FieldProps> {
return this.getFieldNameList(finalName);
};

public getPrevName = () => {
return this.prevName ? this.getFieldNameList(this.prevName) : this.getName(true);
};

public getSource() {
return this.source;
}
Expand Down
8 changes: 8 additions & 0 deletions packages/sula/src/form/__test__/dependency.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down Expand Up @@ -121,6 +122,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down Expand Up @@ -161,6 +163,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down Expand Up @@ -201,6 +204,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down Expand Up @@ -241,6 +245,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down Expand Up @@ -295,6 +300,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down Expand Up @@ -395,6 +401,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down Expand Up @@ -506,6 +513,7 @@ describe('depstore', () => {
setFieldValueByFieldKey: jest.fn(),
getFieldKeyByFieldName: jest.fn((a) => a),
getFieldNameByFieldKey: jest.fn((a) => a),
getPrevFieldNameByFieldKey: jest.fn((a) => a),
};

const form = {
Expand Down
49 changes: 32 additions & 17 deletions packages/sula/src/form/dependency/DepStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ export default class DepStore {
// TODO 如果删除了，要动态更新
public depsByFieldNameList: NameListMap<FieldNameList, TransedDependencies> = new NameListMap();

public parse(fieldConfig: any, deps: Dependencies, getName: (name: FieldNamePath) => FieldNameList) {
public parse(
fieldConfig: any,
deps: Dependencies,
getName: (name: FieldNamePath) => FieldNameList,
) {
const fieldNameList: FieldNameList = getName(fieldConfig.fieldKey || fieldConfig.name);
Object.keys(deps).forEach((type) => {
const dependency: Dependency = deps[type as DependencyType];
Expand Down Expand Up @@ -100,7 +104,9 @@ export default class DepStore {
}

private getDepForm = (ctx) => {
const { getFieldValueByFieldKey, setFieldValueByFieldKey } = ctx.form.getInternalHooks(HOOK_MARK);
const { getFieldValueByFieldKey, setFieldValueByFieldKey } = ctx.form.getInternalHooks(
HOOK_MARK,
);
return {
getFieldValue: getFieldValueByFieldKey,
setFieldValue: setFieldValueByFieldKey,
Expand All @@ -114,7 +120,7 @@ export default class DepStore {
public triggerDependency(originCtx, depsOfType: TransedDependencies, cascadePayload) {
const ctx = this.getDepCtx(originCtx);
const { form } = ctx;
const { getFieldNameByFieldKey } = form.getInternalHooks(HOOK_MARK);
const { getPrevFieldNameByFieldKey, isNeverUpdate } = form.getInternalHooks(HOOK_MARK);

Object.keys(depsOfType).forEach((type) => {
const allDeps: TransedDependency[][] = depsOfType[type as DependencyType];
Expand Down Expand Up @@ -143,24 +149,33 @@ export default class DepStore {
}

const values = [];
// let valuesChanged: boolean = false;
let canDep: boolean = false;

for(let i = 0, len = relates.length; i < len; i+=1) {
for (let i = 0, len = relates.length; i < len; i += 1) {
// 这是 fieldKeyList
const relatedFieldNameList = relates[i];
const relatedFieldValue = form.getFieldValue(relatedFieldNameList);
// const prevRelatedFieldValue = getStoreValue(cascadePayload.cascadePrevStore, getFieldNameByFieldKey(relatedFieldNameList));
// if(prevRelatedFieldValue !== relatedFieldValue) {
// valuesChanged = true;
// }
const prevRelatedFieldValue = getStoreValue(
cascadePayload.cascadePrevStore,
getPrevFieldNameByFieldKey(relatedFieldNameList),
);
// 1. 第一次创建的
// 2. 前后两次值不一样
if (
(isNeverUpdate && isNeverUpdate(relatedFieldNameList)) ||
prevRelatedFieldValue !== relatedFieldValue
) {
canDep = true;
}
values.push(relatedFieldValue);
}


// TODO: 待优化
// if(valuesChanged === false) {
// return;
// }

/**
* 不能直接通过值没变就直接返回，例如拷贝（或者有初始值）动态添加的场景
*/
if (canDep === false) {
return;
}

if (depPlugin) {
if (type === 'source' && autoResetValue) {
Expand Down Expand Up @@ -193,15 +208,15 @@ export default class DepStore {
} else if (type === 'disabled') {
fn = (_name: FieldNameList, _disabled: boolean) => {
const prevDisabled = form.getFieldDisabled(_name);
if(prevDisabled !== _disabled) {
if (prevDisabled !== _disabled) {
// 减少不必要的渲染
form.setFieldDisabled(_name, _disabled);
}
};
} else if (type === 'visible') {
fn = (_name: FieldNameList, _visible: boolean) => {
const prevVisible = form.getFieldVisible(_name);
if(prevVisible !== _visible) {
if (prevVisible !== _visible) {
// 减少不必要的渲染
form.setFieldVisible(_name, _visible);
}
Expand Down
17 changes: 13 additions & 4 deletions packages/sula/src/form/useFormContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,8 @@ class ContextStore {

getFieldKeyByFieldName: this.getFieldKeyByFieldName,
getFieldNameByFieldKey: this.getFieldNameByFieldKey,
getPrevFieldNameByFieldKey: this.getPrevFieldNameByFieldKey,
isNeverUpdate: this.isNeverUpdate,

setAsyncCascade: this.setAsyncCascade,
getAsyncCascade: this.getAsyncCascade,
Expand All @@ -226,14 +228,21 @@ class ContextStore {
return this.getField(fieldNameKey).getName(true)!;
};

private getPrevFieldNameByFieldKey = (fieldNameKey: FieldNameList): FieldNameList => {
return this.getField(fieldNameKey).getPrevName()!;
};

private isNeverUpdate = (fieldNameKey: FieldNameList): boolean => {
return this.getField(fieldNameKey).mountedAndNeverUpdate;
};

private setAsyncCascade = (needAsyncCascade: boolean) => {
this.needAsyncCascade = needAsyncCascade;
}
};

private getAsyncCascade = () => {
return this.needAsyncCascade;
}
};

/** dep end */

Expand All @@ -257,11 +266,11 @@ class ContextStore {

private linkFieldNameAndFieldKey = (newFieldKey: FieldNameList, newFieldName: FieldNameList) => {
this.fieldNameAndFieldKeyMap.set(newFieldKey, newFieldName);
}
};

private unlinkFieldNameAndFieldKey = (oldFieldKey: FieldNameList) => {
this.fieldNameAndFieldKeyMap.delete(oldFieldKey);
}
};

/**
* fieldNameMap: 以 fieldNameList 保存 field 或 支持依赖的 fieldGroup 实例
Expand Down

0 comments on commit 2298baf

Please sign in to comment.