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 函数中使用它们，来操作我们需要导入 react-dom 模块的 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 状态/动作/reducer 事情有点过头了。当然，这一切都归结为个人喜好，但没有必要让事情变得更复杂。

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

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