![react中useeffect(..., [props.scrolltoidx])如何保证每次都执行？](https://img.php.cn/upload/article/001/246/273/173185452366954.jpg)
useeffect(..., [props.scrolltoidx]) 如何每次都执行
在 react 中，useeffect() 钩子允许组件执行副作用，例如数据获取、dom 操作或计时器。
在给定的示例中，你希望在 props.scrolltoidx 更新时始终执行一个副作用。然而，由于 [props.scrolltoidx] 依赖项数组中仅包含 props.scrolltoidx，因此只有当 props.scrolltoidx 更改时，组件才会重新渲染并且 useeffect() 才会执行。
要确保每次执行 useeffect()，可以考虑采用以下解决方案：
使用命令式调用
使用命令式调用意味着显式地调用一个方法来触发副作用，而无需依赖于道具更新。为此，可以使用 useimperativehandle() 钩子：
const subcontainer = forwardref((props, ref) => {
const scrollto = (scrolltoidx) => {
// 滚动操作...
};
useimperativehandle(
ref,
() => ({
scrollto,
}),
[]
);
// ...其余组件代码
});在父组件中，可以使用 useref() 钩子来存储对子组件实例的引用，然后调用 scrollto() 方法：
const conRef = useRef();
const btnClick = () => {
conRef.current.scrollTo(20);
};
return (
总结：
当需要强制每次执行 useeffect() 时，使用命令式调用是一个有效的解决方案，因为这可以绕过对道具更新的依赖性。
