React + Redux：在状态更改后滚动DOM元素

Question

Redux这里的新手，真的只是寻找“最佳实践”的答案。

我正在使用React + Redux构建聊天应用程序。我的应用程序看起来像这样：

• 我的应用容器，消息列表和输入栏的3个无状态组件
• 添加用户消息/回复的操作
• 接收这些操作并返回消息数组的reducer
• 在调度ADD_MESSAGE操作时处理发出套接字消息的聊天中间件

到目前为止一切顺利。一切都运行良好，但我不确定在这个序列中我应该如何/在哪里进行DOM操作。具体来说，每当我的消息发生变化时，我都想滚动到message-list容器的底部。

我需要解雇的是：messagesListElement.scrollTop = messagesListElement.scrollHeight;，但不确定适当的地方在哪里。

Answer 1

您提到所有三个组件都是无状态的，这意味着消息在redux存储中维护，这意味着它们作为props传递给子组件。基本上有五种生命周期方法可以在组件更新之后/之前触发。

• componentWillReceiveProps（）
• shouldComponentUpdate（）
• componentWillUpdate（）
• componentDidUpdate（）
• 渲染（）

现在，由于您希望在将新邮件推送到邮件状态后向下滚动，因此最好的位置是 componentDidUpdate（）

为什么不是componentWillReceiveProps - 这是在新消息即将在组件的新道具中传递之前执行的函数。这是更新组件状态以抵御新道具的最佳位置，但由于您的组件是无状态的，因此这不适合滚动。 This可能会有所帮助

希望有所帮助：）