React中useEffect(…, [props.scrollToIdx])如何保证每次都执行？

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 (   <div>     <SubContainer ref={conRef} {...props} />     <button onClick={btnClick}>点击</button>   </div> );

总结：

当需要强制每次执行 useeffect() 时，使用命令式调用是一个有效的解决方案，因为这可以绕过对道具更新的依赖性。