alibaba / alibaba/lowcode-engine
为什么在画布里每次点击 Tabs 组件都会触发 leaf.onPropChange 事件(导致重渲染)?
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 2.7k
- PR merge metrics
- No merged PRs in 30d
Description
## **Describe the bug (required)** / **详细描述 bug(必填)**
Antd Tabs 组件的 [meta 文件](https://github.com/alibaba/lowcode-materials/blob/main/packages/antd-lowcode-materials/lowcode/tabs/meta.ts) 没有比较特殊的描述,但每次在画布中点击 Tabs 组件,leaf.onPropChange 事件
都会触发,组件的 props 会重新解析,this.setState 的调用导致 Tabs 组件重渲染
关联 issue:
https://github.com/alibaba/lowcode-engine/issues/1121
https://github.com/alibaba/lowcode-engine/issues/1118
初步定位是重新解析的 props 跟首次解析的 props 不一致,导致了 1121、1118 点击组件 slot 没了的问题
## **To Reproduce (required)** / **如何复现 bug?(必填,非常重要)**
* git clone lowcode-materials 仓库
* git clone lowcode-engine 仓库
* cd lowcode-materials && cd packages/antd-lowcode-materials && npm run lowcode:dev
* 给 lowcode-engine [这行代码](https://github.com/alibaba/lowcode-engine/blob/main/packages/renderer-core/src/hoc/leaf.tsx#L395) 写入 debugger
* 配置 xswitch
* 拖入 Tabs 组件\ Button 组件
* 点击画布里的 Page 组件
* 点击画布里的 Tabs 组件(触发 debug)
* 点击画布里的 Button 组件
* 点击画布里的 Tabs 组件(触发 debug)
* .....
发现每次点击 Tabs 组件都会触发 leaf.onPropChang 事件
xswitch 配置如下
```
{
"proxy": [
[
"https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.14/dist/js/engine-core.js",
"http://localhost:5555/js/engine-core.js"
],
[
"https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.14/dist/css/engine-core.css",
"http://localhost:5555/css/engine-core.css"
],
[
"https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.0.14/dist/js/react-simulator-renderer.js",
"http://localhost:5555/js/react-simulator-renderer.js"
]
],
}
···
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with packages/renderer-core/src/hoc/leaf.tsx around line 395 and the Tabs metadata in packages/antd-lowcode-materials/lowcode/tabs/meta.ts. Reproduce the behavior with the lowcode-materials and lowcode-engine development setup, using the listed canvas click sequence and debugger. Done means clicking Tabs no longer triggers the unintended leaf.onPropChange processing or causes the reported prop and slot inconsistencies.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100