reactjs - 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'

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

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

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

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

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

我们定义 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 状态/ Action / reducer 的事情有点矫枉过正。当然，这一切都取决于个人喜好，但没有必要让事情变得更复杂。

不知道您的整个应用程序，我只是在这里做出假设，但想象一下您的页面有一个按钮或其他东西，其唯一目的是将用户滚动回窗口顶部。这是 Redux 或 React 不需要关心的事情，因此将其利用到普通的旧 JavaScript 中要容易得多。解决这个问题的方法通常涉及 componentDidMount，向按钮添加一个点击监听器，并处理那里的滚动。

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