Question

我有这堂课：

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：告诉状态类实例已经发生变异

2 个答案: