javascript 有没有一个React等效于Vue的nextTick()函数?

pxq42qpu  于 2023-02-11  发布在  Java
关注(0)|答案(3)|浏览(985)

Vue有这个nextTick函数,它是一个异步函数,等待DOM刷新,当你想直接在一个元素上执行一些操作时特别有用,比如用scroll()滚动一个DIV,这样就避免了把这个调用 Package 成一个盲的setTimeout()
在React中,我过去使用过setTimeout(),有没有nextTick()的等价物,或者更好的方法?

zrfyljdw

zrfyljdw1#

您可以使用reactHooks来处理应用程序的生命周期。
在您的功能组件中:

import React, { useEffect } from 'React'

useEffect(() => {
   // your method
}, []);

这将在第一次渲染中渲染。
您可以将依赖项设置为在其更改时侦听。

import React, { useEffect } from 'React'

useEffect(() => {
   // your method
}, [yourDependence]); //it will run every yourDependence change and the first time.
anauzrmj

anauzrmj2#

在React类组件中,您可以使用componentDidMount进行第一次渲染,使用componentDidUpdate进行后续渲染,以执行DOM更新。
componentDidMount
需要DOM节点的初始化应该放在这里。
请参见www.example.comhttps://reactjs.org/docs/react-component.html#componentdidmount
componentDidUpdate
当组件被更新时,可以利用这个机会对DOM进行操作。
请参见www.example.comhttps://reactjs.org/docs/react-component.html#componentdidupdate
对于功能组件,有useEffect挂钩。
参见https://reactjs.org/docs/hooks-effect.html

oyjwcjzk

oyjwcjzk3#

在这种情况下,可以使用setTimeout来实现这个目标。
参见:www.example.comhttps://developer.mozilla.org/en-US/docs/Web/API/setTimeout#late_timeouts
因为它将在当前线程结束时执行参数中给定的函数,所以它的行为接近Vue.nextTick
示例:https://codesandbox.io/s/gallant-roman-y0b9un?file=/src/App.js

相关问题