useeffect([props.scrolltoidx]) 让每次都执行的办法
在react组件中使用useeffect时，通常依赖项数组（第二个参数）用于决定何时重新执行useeffect。当依赖项数组中的任何值发生变化时，useeffect会重新执行。
问题描述：
在子组件中使用useeffect来监听props.scrolltoidx的变化。如果props.scrolltoidx更新，useeffect就会执行并滚动到相应位置。但是，如果props.scrolltoidx没有更新，useeffect就不会执行。
解决办法：
为了让useeffect每次都执行，一种方法是使用命令式调用而不是响应式更新。我们可以使用react的ref来创建子组件的引用，并通过父组件调用子组件的方法。
具体实现：
在子组件中：
import { forwardref, useimperativehandle, useref } from 'react';
const subcontainer = forwardref((props, ref) => {
const scrollto = (scrolltoidx) => {
const container = document.queryselector('#container');
const div = document.queryselector('#item-' + scrolltoidx.tostring());
container.scrollto({
top: div.offsettop,
behavior: 'smooth',
});
};
useimperativehandle(ref, () => ({
scrollto,
}), []);
return /* ... component code */
});在父组件中：
import { useRef } from 'react';
const ParentComponent = () => {
const conRef = useRef();
const btnClick = () => {
conRef.current.scrollTo(20);
};
return (
<div>
<SubContainer ref={conRef} /* ... props */ />
<button onClick={btnClick}>点击</button>
</div>
);
};通过使用ref，父组件可以访问子组件的scrollto方法，并将其作为命令进行调用。这使得useeffect可以绕过依赖项数组而每次都执行。
以上就是React中如何让useEffect在每次渲染时都执行？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
284
收藏
