修复Fragment组件设置key不生效的问题

This commit is contained in:
huangxuan 2023-12-05 19:54:55 +08:00
parent cb7063ad82
commit 5b0ed0a5aa
No known key found for this signature in database
GPG Key ID: E79F50C67022565D
2 changed files with 58 additions and 1 deletions

View File

@ -473,4 +473,61 @@ describe('Fragment', () => {
expect(LogUtils.getNotClear()).toEqual([]); expect(LogUtils.getNotClear()).toEqual([]);
expect(container.textContent).toBe('1'); 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 (
<Fragment key={item.id}>
<Child val={item.text} />
</Fragment>
);
})}
</>
);
};
const Child = ({ val }) => {
const mount = useRef(false);
useEffect(() => {
if (!mount.current) {
didMount();
mount.current = true;
} else {
didUpdate();
}
});
return <div>{val}</div>;
};
act(() => Inula.render(<App />, 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);
});
}); });

View File

@ -159,7 +159,7 @@ function getNewNode(parentNode: VNode, newChild: any, oldNode: VNode | null) {
const key = oldNode !== null ? oldNode.key : newChild.key; const key = oldNode !== null ? oldNode.key : newChild.key;
resultNode = createFragmentVNode(key, newChild.props.children); resultNode = createFragmentVNode(key, newChild.props.children);
} else { } else {
resultNode = updateVNode(oldNode, newChild); resultNode = updateVNode(oldNode, newChild.props.children);
} }
break; break;
} }