如何拦截setState函数以捕获单个状态更改？

Question

我正在React应用程序中实现活动日志记录，以跟踪用户活动，一种实用的方法是简单地将每个更改记录到组件状态。在我的场景中，状态对象很大，因此我只想捕获已更改的元素，这也更容易在日志中读取。为此，最好拦截每个setState调用，以便我可以获取状态中发生变化的特定部分。我将大多数状态都放在一个较高级别的组件中，因此我基本上只需要在一个组件中执行此操作。

我不想在所有组件代码中每次调用setState时都执行此操作。我希望能够在组件级别一次全部拦截它。

是否存在一种优雅的方法来拦截setState，而无需创建备用setState函数存根？

任何提示都非常感谢。谢谢。

Answer 1

以下生命周期方法将显示组件中状态/属性更改时的更改。您可以使用状态对象来确定活动记录。

// Happens before the component update
componentWillUpdate(object nextProps, object nextState)
// Happens after the component update
componentDidUpdate(object prevProps, object prevState)

例如，

componentDidUpdate(prevProps, prevState) {
  if(prevState.isLoadingData !== this.state.isLoadingData) {
    writeToActivityLog('user-requested-new-data');
  }
}

  

在我的场景中，状态对象很大，因此我想捕获   仅更改的元素，这也将更易于阅读   日志。

在这种情况下，您可以使用lodash之类的实用程序库来获取所有已更改的属性，或者在this.state和prev/nextState之间进行深度相等。即使那样，您可能仍需要条件来记录不同的事件。