useLayoutEffect
优质
小牛编辑
127浏览
2023-12-01
与 useEffect 相同,但在所有 DOM 变化后它会同步触发。在浏览器有机会绘制之前,将在 useLayoutEffect 内部的逻辑同步触发。
在尽可能的情况下首选标准的 useEffect ,以避免阻止视觉更新。
import { useLayoutEffect } from 'rax';
function Example() {
const [count, setCount] = useState(0);
useLayoutEffect(() => {
// Fires in the same phase as componentDidMount and componentDidUpdate
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}