修复Fragment组件设置key不生效的问题
This commit is contained in:
parent
cb7063ad82
commit
5b0ed0a5aa
|
@ -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 (
|
||||
<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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue