reactjs - React 状态下的构造实例

Question

我不喜欢类里面有太多逻辑。有时，我想抽出一些东西并制作一种新类型(比如以前的标准编码)。如果我有一些 utils/Dev.js，比如

function Dev(x) {
  this.x = x
}
Dev.prototype.inc = function() {
  this.x = this.x+1
}

如果我要在构造函数中用它实例化一个 React 组件

this.state.dev = new Dev(42)

this.state.dev 不会访问this，所以它不能inc。我是不是遗漏了什么或者构造的实例在这里没用？

Answer 1

Dev实例绝对可以调用它的inc()函数。我在下面包含了一个片段来展示这一点。

我不会说构造的实例是无用的，它只是取决于您如何以及为什么使用它们。

这可能不是一个好主意的原因是，如果您的意图是让组件根据实例状态(在您的情况下为 x 变量)的更改进行更新，那么它不会发生，因为 Dev 实例在状态不是通过 setState() 直接改变的。

function Dev(x) {
  this.x = x
}
Dev.prototype.inc = function() {
  this.x = this.x+1
}
Dev.prototype.get = function() {
  return this.x
}

// Example class component
class Container extends React.Component {

  constructor(props: IAppProps) {
        super(props);
        
        this.state = {dev: new Dev(42)};
    }

  handleInc() {
    this.state.dev.inc();
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <h1>{this.state.dev.get()}</h1>
        <button onClick={() => { this.handleInc(); }}>Increment</button>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Container/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>