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

Question

简而言之

在使用 React 几个月后 - 使用 this 跟踪组件中变化的变量的想法感觉就像在北极浮潜 - 永远没有人应该这样做。

但是对于 Leaflet，会发生这种情况（关于我将跳过的细节，我不能使用现在存在的非常好的 Leaflet 组件包装器。

导致我去this的问题：

我正在尝试将初始缩放级别作为状态保存到商店中，但由于我使用的是更改渲染路径的操作，因此我无法调用 Map Component另一个动作作为MapComponent 挂载而没有得到链动作错误“不变调度”。我也找不到任何异步更新来放大传单文档以解决同步操作错误。

如果没有初始缩放，我看不到用户进行的第一次缩放是向上还是向下:(

我的黑客解决方案：

由于地图的其余部分保存在this 中，我刚刚创建了this 的另一个属性，称为this.currenZoom，该属性在组件安装时被初始化，并在调用zoomStart 时更新。（技术上像状态一样更新）

我的问题：

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

注意：这个问题可能会让人觉得很生气，但说真的，我已经使用state 和props 进行了很长时间的所有事情，以至于在我的组件中使用this 感觉超级hacky。强>

Answer 1

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

这样做最常用作“逃生舱”机制——就像你在此处提到的场景——其中某些库、插件或函数与虚拟 DOM 的交互方式与普通组件的交互方式不同.

你甚至可以使用in the SetIntervalMixin mixin example这个方法查看React文档：

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