From 5b0ed0a5aa044b53a44d32440627795fd489be50 Mon Sep 17 00:00:00 2001 From: huangxuan Date: Tue, 5 Dec 2023 19:54:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DFragment=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E8=AE=BE=E7=BD=AEkey=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ComponentTest/FragmentComponent.test.js | 57 +++++++++++++++++++ .../src/renderer/diff/nodeDiffComparator.ts | 2 +- 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/packages/inula/scripts/__tests__/ComponentTest/FragmentComponent.test.js b/packages/inula/scripts/__tests__/ComponentTest/FragmentComponent.test.js index c91c5dac..6ac08b89 100644 --- a/packages/inula/scripts/__tests__/ComponentTest/FragmentComponent.test.js +++ b/packages/inula/scripts/__tests__/ComponentTest/FragmentComponent.test.js @@ -473,4 +473,61 @@ describe('Fragment', () => { expect(LogUtils.getNotClear()).toEqual([]); expect(container.textContent).toBe('1'); }); + + it('Fragment 设置相同的key不会重新渲染组件', () => { + const { useState, useRef, act, Fragment } = Inula; + let setFn; + const didMount = jest.fn(); + const didUpdate = jest.fn(); + + const App = () => { + const [list, setList] = useState([ + { text: 'Apple', id: 1 }, + { text: 'Banana', id: 2 }, + ]); + + setFn = setList; + + return ( + <> + {list.map(item => { + return ( + + + + ); + })} + + ); + }; + + const Child = ({ val }) => { + const mount = useRef(false); + useEffect(() => { + if (!mount.current) { + didMount(); + mount.current = true; + } else { + didUpdate(); + } + }); + + return
{val}
; + }; + + act(() => Inula.render(, container)); + + expect(didMount).toHaveBeenCalledTimes(2); + act(() => { + setFn([ + { text: 'Apple', id: 1 }, + { text: 'Banana', id: 2 }, + { text: 'Grape', id: 3 }, + ]); + }); + + // 数组前两项Key不变子组件更新,第三个子组件会挂载 + expect(didMount).toHaveBeenCalledTimes(3); + expect(didUpdate).toHaveBeenCalledTimes(2); + }); }); diff --git a/packages/inula/src/renderer/diff/nodeDiffComparator.ts b/packages/inula/src/renderer/diff/nodeDiffComparator.ts index 8de6f392..bb07e3ef 100644 --- a/packages/inula/src/renderer/diff/nodeDiffComparator.ts +++ b/packages/inula/src/renderer/diff/nodeDiffComparator.ts @@ -159,7 +159,7 @@ function getNewNode(parentNode: VNode, newChild: any, oldNode: VNode | null) { const key = oldNode !== null ? oldNode.key : newChild.key; resultNode = createFragmentVNode(key, newChild.props.children); } else { - resultNode = updateVNode(oldNode, newChild); + resultNode = updateVNode(oldNode, newChild.props.children); } break; }