Redux，同步动作后的回调

【问题标题】：Redux, callback after synchronous actionRedux，同步动作后的回调
【发布时间】：2016-03-13 10:54:55
【问题描述】：

我试图弄清楚如何在调用同步操作后正确实现回调，并且相关的反应组件已更新。我正在尝试做的事情可以与滚动到新创建的待办事项进行比较。

我目前在做什么：

// in Entries Component
createEntry() {
  this.props.actions.createNewEntry(key);

  setTimeout(() => {
    // accessing updated DOM
    this.scrollToAndFocus(key);
  });
}

它有效，但感觉非常脆弱和骇人听闻。一定有更好的办法吗？

【问题讨论】：

也许 ... 在 componentDidMount 中，如果它是一个新的待办事项 - 滚动到那个节点？

标签： reactjs redux

【解决方案1】：

正如 cmets 中所回答的，组件生命周期中的正确挂钩是 componentDidUpdate。来自docs：

在组件的更新刷新到 DOM 后立即调用。初始渲染不调用此方法。

因此你的组件变成：

createEntry() {
    this.props.actions.createNewEntry(key);
}

componentDidUpdate() {
    this.scrollToAndFocus(key);
}

请注意，如果您进一步修改 componentDidUpdate 中的 DOM，那么您应该实现停止条件，否则您将陷入无限循环。这可以做到

通过覆盖shouldComponentUpdate，如果停止条件取决于props 或state 的当前值和未来值。
在componentDidUpdate中，如果它依赖于一些DOM属性，例如document.activeElement

【讨论】：