React：告诉状态 class 实例发生了变异

Question

我有这个class:

class MyClass {
  constructor() {
    this.value = 'foo';
  }

  mutate() {
    this.value = 'bar';
  }
}

以及一个在其状态下有一个实例的组件：

let Component = React.createClass({
  getInitialState: function() {
    return {
      element: new Myclass()
    };
  },
  mutateElement: function() {
    this.state.element.mutate();
  }
});

我怎样才能让 <Component /> 知道 this.state.element 已经发生变化并且需要重新渲染？

使用 React immutability Helpers 无效，因为以下语法无效：

mutate() {
  this = update(this, {value: {$set: 'bar'}); 
}

Answer 1

有两种方法可以解决这个问题。首先是简单的方法：this.forceUpdate() 但是要具体反应tells，尽量避免。但我觉得你有一个有效的用例。

let Component = React.createClass({ 
    getInitialState: function() { 
        return { element: new Myclass() }; 
    }, 
    mutateElement: function(){ 
        this.state.element.mutate();
        this.forceUpdate();
    } 
});

但是如果你想坚持不使用 this.forceUpdate() 你可以在状态中有另一个变量并设置它。

let Component = React.createClass({ 
    getInitialState: function() { 
        return { element: new Myclass(),
        hasChanged: false }; 
    }, 
    mutateElement: function(){ 
        this.state.element.mutate();
        this.setState({hasChanged: true});
    } 
});

这会改变它并重新渲染你的组件。

Answer 2

我知道的最好方法是克隆一个实例。例如来自 lodash 的 _.cloneDeep() 。但这会影响性能。

React：告诉状态 class 实例发生了变异

React: tell state that class instance has mutated

immutability

reactjs