React + Redux 中 dom 操作的复杂性

Question

我正在尝试简化使用 React 和 Redux 时的工作流程。

对于基本的 DOM 操作任务，例如向下滚动元素或在某个时间间隔内执行某项检查，您必须声明许多函数，突然间您可能有 100 行代码，而本应如此只是几行代码。

以下示例使用的是 react-redux 初学者工具包。使用

等辅助模块

createAction, handleActions

执行的任务基本是

var objDiv = document.getElementById("id");
objDiv.scrollTop = objDiv.scrollHeight;

首先我们必须在模块

中设置我们的动作类型

export const SCROLL_DOWN = 'SCROLL_DOWN'

然后我们必须定义向下滚动的动作

export const setScrollDown = createAction(SCROLL_DOWN, (setScrollDown = true) => setScrollDown)

然后是 reducer，我们在其中设置状态 hasScrolledDown，这又必须在我们所在的模块中定义。

export default handleActions({
  [SCROLL_DOWN]: (state, { payload }) => {
    return {
      ...state, hasScrolledDown: payload
    }
  }
}, {hasScrolledDown: false})

接下来我们必须在视图中使用所有这些

我们定义了 propTypes

class MessagesView extends React.Component {
  static propTypes = {
    setScrollDown: PropTypes.func,
    hasScrolledDown: PropTypes.bool
  };

最后，我们在 componentDidMount 和 componentDidUpdate 函数中使用它们，以操纵 dom 我们需要导入 react-dom 模块，以便它位于文档的顶部。

import ReactDOM from 'react-dom'

然后我们终于可以向下滚动页面了。

componentDidMount () {
  this.props.setScrollDown(false)
}

componentDidUpdate (prevProps, prevState) {
  if (!this.props.hasScrolledDown) {
    ReactDOM.findDOMNode(this).scrollIntoView(false)
    this.props.setScrollDown(true)
  }
}

所以，我的问题是：我是不是以错误的方式解决这个问题，或者是否有一个简单的解决方案来处理像这样的简单 dom- 操作？

正如您想象的那样，当您拥有一个需要执行基本的 dom 操作任务的大型应用程序时，代码库增长得非常快。

Answer 1

对于 DOM 这样的事情，比如滚动到某个点，做整个 Redux state/action/reducer 事情有点矫枉过正。当然，这一切都归结于个人喜好，但没有必要把事情弄得比现在复杂。

不知道您的整个应用程序，我只是在这里做假设，但假设您的页面有一个按钮或其他东西，其唯一目的是将用户滚动回 window 的顶部。这是 Redux 或 React 不需要关心的事情，因此将它用于普通的旧 javascript 非常容易理解。解决此问题的方法通常涉及 componentDidMount，向按钮添加点击侦听器，并负责那里的滚动。

我什至在持久状态下不需要的工具提示和其他 GUI 内容上使用这种方法，因为通常它没有意义。 Redux 非常适合跟踪应用程序状态，但这并不意味着您被迫将它用于您不必在任何给定时间重现的每一件小事。

React + Redux 中 dom 操作的复杂性

The Complexity of dom manipulation in React + Redux

reactjs

redux

dom-manipulation