渲染

[diyiduanfa]

组件还是会重新渲染，只是他的display：none属性改变了，那不是和直接设置display：none来控制一样吗

[IVLIU]

你可以在你组件里加一个console，看下是否输出console，如果组件函数不执行，即未重新渲染，组件也不参与diff，在性能上是会占一些优势的

[diyiduanfa]

组件函数会执行的

[IVLIU]

https://codesandbox.io/p/sandbox/react-activity-sample-sjq6kh?file=%2Fsrc%2FApp.tsx 先升级到1.0.5，再参考下这个例子

[diyiduanfa]

组件函数还是会执行，就只是他的dispaly：none属性变了，链接打不开

[IVLIU]

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会输出吗

[diyiduanfa]

隐藏时不会，就是能不能实现被缓存的组件显示的时候也不输出

[IVLIU]

显示的时候组件是正常渲染的，默认是会默认输出的，如果不想输出可以拿memo包一下