import { Tooltip } from "@material-ui/core";
import React, { Profiler, useLayoutEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
const arr = new Array(100).fill(0);
const List = React.memo(() => {
return (
<>
xxxxx
{arr.map((item, index) => (
<div key={
${item}-${index}}>
{item}-{index}
))}
</>
);
});
const TestComp = React.memo(() => {
const ref = useRef();
useLayoutEffect(() => {
const dom = ref.current;
ReactDOM.render(<List />, dom);
return () => {
ReactDOM.unmountComponentAtNode(dom);
};
}, []);
return
;
});
const User = React.memo(() => {
const [open, setOpen] = useState(false);
return (
<Profiler
id="test-light-comp-demo"
onRender={(id, phase, duration) => {
console.log({ id, phase, duration });
}}
>
<div
onClick={() => {
setOpen((item) => !item);
}}
>
xxxxx
{/* {open && } */}
);
});
export default User;
import { Tooltip } from "@material-ui/core";
import React, { Profiler, useLayoutEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
const arr = new Array(100).fill(0);
const List = React.memo(() => {
return (
<>
xxxxx
{arr.map((item, index) => (
<div key={
${item}-${index}}>{item}-{index}
))}
</>
);
});
const TestComp = React.memo(() => {
const ref = useRef();
useLayoutEffect(() => {
const dom = ref.current;
}, []);
return
;});
const User = React.memo(() => {
const [open, setOpen] = useState(false);
return (
<Profiler
id="test-light-comp-demo"
onRender={(id, phase, duration) => {
console.log({ id, phase, duration });
}}
>
<div
onClick={() => {
setOpen((item) => !item);
}}
>
xxxxx
{/* {open && } */}
);
});
export default User;