Closed diyiduanfa closed 6 months ago
你可以在你组件里加一个console,看下是否输出console,如果组件函数不执行,即未重新渲染,组件也不参与diff,在性能上是会占一些优势的
组件函数会执行的
组件函数还是会执行,就只是他的dispaly:none属性变了,链接打不开
import { useState, startTransition } from "react";
import { Activity } from "@ivliu/react-offscreen";
function Counter() {
const [count, setCount] = useState(0);
console.log("Counter render", count);
return (
<>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</>
);
}
export default function App() {
const [open, setOpen] = useState(true);
const [, setRender] = useState({});
console.log("App render", open);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={() => startTransition(() => setRender({}))}>render</button>
<button onClick={() => setOpen(!open)}>toggle</button>
<Activity mode={open ? "visible" : "hidden"}>
<Counter />
</Activity>
</div>
);
}
你先升级到1.0.5版本,再试下当open为false时,Counter render会输出吗
隐藏时不会,就是能不能实现被缓存的组件显示的时候也不输出
显示的时候组件是正常渲染的,默认是会默认输出的,如果不想输出可以拿memo包一下
组件还是会重新渲染,只是他的display:none属性改变了,那不是和直接设置display:none来控制一样吗