Vue有这个nextTick
函数,它是一个异步函数,等待DOM刷新,当你想直接在一个元素上执行一些操作时特别有用,比如用scroll()
滚动一个DIV,这样就避免了把这个调用 Package 成一个盲的setTimeout()
。
在React中,我过去使用过setTimeout()
,有没有nextTick()
的等价物,或者更好的方法?
Vue有这个nextTick
函数,它是一个异步函数,等待DOM刷新,当你想直接在一个元素上执行一些操作时特别有用,比如用scroll()
滚动一个DIV,这样就避免了把这个调用 Package 成一个盲的setTimeout()
。
在React中,我过去使用过setTimeout()
,有没有nextTick()
的等价物,或者更好的方法?
3条答案
按热度按时间zrfyljdw1#
您可以使用
reactHooks
来处理应用程序的生命周期。在您的功能组件中:
这将在第一次渲染中渲染。
您可以将依赖项设置为在其更改时侦听。
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
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