big-react icon indicating copy to clipboard operation
big-react copied to clipboard

fix: fix recordHostChildrenToDelete for fragment deletion

Open Russellwzr opened this issue 1 year ago • 0 comments

原代码中标记Fragment下需要被删除的元素时,没有考虑到Fragment嵌套的情况,会导致部分待删除元素被忽略,可用原代码运行如下组件进行复现:

function App() {
	const [num, setNum] = useState(0);

	return (
		<ul onClick={() => setNum((prevNum) => prevNum + 1)}>
			<li>a</li>
			<li>b</li>
			{num % 2 === 0 ? (
				<>
					<li>item-1</li>
					<>
						<li>item-2</li>
						<>
							<li>item-3</li>
							<li>item-4</li>
						</>
						<li>item-5</li>
					</>
					<li>item</li>
				</>
			) : (
				<li>test</li>
			)}
			<li>c</li>
			<li>d</li>
		</ul>
	);
}

改进策略为:修改recordHostChildrenToDelete,通过BFS标记各层Fragment下需要删除的元素,并将recordHostChildrenToDelete与commitNestedUnmounts解耦,增强代码可读性。

Russellwzr avatar Jul 04 '23 03:07 Russellwzr