useEffect 中的 Scroll 功能反应非常奇怪答案

【问题标题】：very weird thing with Scroll function in useEffect reactuseEffect 中的 Scroll 功能反应非常奇怪
【发布时间】：2021-01-25 02:23:47
【问题描述】：

我有一个包含聊天消息的 div，我希望它在渲染后立即向下滚动到最新消息。因此，当我在 useEffect 中对该 div 使用滚动功能时，它不起作用，但是当我在 setTimeout 中运行它时，它起作用了

  useEffect(()=>{
            getConversation()//fetch the conversation
            setTimeout(() => {
                holder.current.scroll(0, holder.current.scrollHeight)          
            console.log('=====================>',holder.current.scrollHeight)

            }, 400);
    },[getConversation])

如果我将时间设置为 200 毫秒而不是 400 毫秒，那真的很奇怪

【问题讨论】：

你为什么用setTimeout
我认为您的 getConverstion() 方法需要很长时间才能执行，因此当您添加 setTimeout() 时，您之前的函数会获得执行时间，因此会得到所需的结果。
- 我使用 settimeout 因为它不起作用
那么你觉得我应该怎么做，Rohit
setTimeout 几乎总是一种代码味道。您需要将函数作为回调运行。尝试为您的连接上的负载计时不会转化为其他人较慢的连接。

标签： javascript reactjs

【解决方案1】：

抓取和滚动应该分开。

在第一次加载组件时进行获取。

滚动应该在内容加载时发生，并且页面尚未滚动到顶部，因此滚动应该仅取决于这两个标准，例如：

  useEffect(()=>{
      getConversation() // <--- updates state 'conversations'
  },[ getConversation ]);

  useEffect(()=>{
      if( needsToScroll ){  // <-- check somehow if already top
          holder.current.scroll(...)
      }
  }, [ conversation ]);

needsToScroll 条件可能会被省略，然后页面会尝试在 conversation 的每次更改上滚动，这可能不可见，不经常出现，没关系。

另一方面，如果您需要检查holder.current 是否可用（在每次渲染上），则可能需要忽略整个依赖项（[ conversation ]）。那么needsToScroll 可以同时检查holder.current 和conversation。

【讨论】：