Reactjs - 在组件中使用"this" - 是否应始终避免使用？

Question

简而言之

在使用React几个月后——使用this来跟踪组件中变量变化的想法已经变得像在北极浮潜——任何人都不应该这样做。

但有了传单，就会发生这种情况（关于细节，我将跳过，我不能使用现在存在的真正甜美的传单组件包装

导致我进入this:的问题

我正试图将初始缩放级别保存为存储状态，但由于我使用的是一个更改渲染路径并打开Map Component的操作，因此在MapComponent装载时，我无法调用另一个操作，而不会得到连锁操作错误"Invariant Dispatch"。我也找不到任何异步更新来放大传单文档以绕过同步操作错误。

如果没有初始缩放，我看不出用户的第一次缩放是向上还是向下：（

我的破解解决方案：

由于映射的其余部分保存在this中，我刚刚创建了this的另一个名为this.currenZoom的属性，该属性在组件装载时初始化，并在调用zoomStart时更新。（技术更新，如状态）

我的问题：

我是不是用this在北极浮潜来保持变焦状态？或者这是可以接受的，因为从技术上讲，Leaflet与虚拟DOM的工作方式不同在某些情况下，在我们的组件中可以使用this来管理变量更新

注意：这个问题可能会让人觉得很恼火，但说真的，我在所有方面都使用了state和props太久了，以至于在我的组件中使用this感觉MEGA很麻烦

Answer 1

我确实认为直接在this上保留数据是可以的，前提是它不会影响渲染（尽管我不会这样做，除非有充分的理由不简单地将其置于组件状态）。render方法应该始终是this.state和this.props的函数（并且仅这两件事）。

这样做通常被用作"转义孵化"机制——就像你在这里提到的场景一样——其中一些库、插件或函数与虚拟DOM的交互方式与普通组件不同。

您甚至可以在SetIntervalMixin mixin示例中看到使用此方法的React文档：

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.forEach(clearInterval);
  }
};