Question

例如，我有一个商店：

class MyStore {
  constructor() {
    this.value = 1;
  }
}

我需要在视图中获取并更改MyStore.value。

我能做到：

class MyView extends React.Component {
  constructor() {
    super();
    this.state = {
      value: MyStore.getValue()
    };
  }

并改变它：

userClick() {
     this.setState({value: MyStore.changeValue('newValue')});
  }

或者更改商店中的value并调用emit。

但是我可以用forceUpdate()：

来做到这一点

  render() {
     const value = MyStore.value;
     return (
        <div>{value}</div>
     )
  }

并改变它：

userClick() {
     MyStore.value = 'newValue';
     this.forceUpdate();
  }

为什么不好？

Answer 1

我不认为你要做的事情有什么不妥。你是＆＃34;只是＆＃34;遵循基本的OO规则并封装您的数据。

实际上我并不理解为什么大多数基本的React示例都没有引入这种模式，而不是混合数据和表示。通常，在您找到涉及Flux，Redux或MobX的示例之前，您不会看到像商店这样的内容（我认为这是您可以选择的方式）。

我已经在这个codepen中重写了你的例子以使用getter和setter，并且我使用观察者模式来通知数据何时发生了变化。我会声称这个（记住它是一个快速演示）是使用forceUpdate()的绝佳方式。

class MyView extends React.Component {
  constructor(props) {
    super(props);
    this.props.store.setObserver(this);
  }
  changed(){
    this.forceUpdate();
  }
  render() {
     return (
        <div>
          <button onClick={()=>this.props.store.value = Math.random()}>Change</button>
          <p>{this.props.store.value}</p>
        </div>
     )
  }
}

class MyStore {
  constructor() {
    this._value = 1;
  }

  get value() {
    return this._value;
  }
  set value(val) {
    console.log(val);
    this._value = val;
    this._observer.changed();
  }
  setObserver(observer){
    this._observer = observer;  
  }
}

实际上这就是mobX library在表面下所做的事情。它为您提供自动监听功能，如果这是您计划的方式，我绝对建议您查看此库。

它将处理所有＆＃34;观察者＆＃34;详细信息，包括forceUpdate（）自动（它不使用forceUpdate，但在需要更新时调用render（）方法）。

使用mobX，示例可以归结为（使用功能组件，因为它不需要状态）

var View = observer((props) => (
        <div>
          <button onClick={()=>props.store.value = Math.random()}>Change</button>
          <p>{props.store.value}</p>
        </div>
     )
  )

class MyStore {
  @observable value =1;
  get value() { return this._value; }
  set value(val) { this._value = val; }
}

在codepen.io

上进行现场演示

为什么我不应该使用forceUpdate（）

1 个答案: