なぜ私が店を持っ例えばforceUpdate（）

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を変更して発する呼び出します。

しかし、私はforceUpdate()でそれを行うことができます。

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

そして、それを変更します。

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

なぜそれが悪いのですか？

Answer 1

あなたがしようとしていることに何か間違っているとは思わない。あなたは基本的なOOルールに従うだけで、データをカプセル化しています。

実際には、データとプレゼンテーションをミキシングするのではなく、ほとんどの基本的なリアクションの例でこのパターンが導入されないのはわかりません。 Flux、Redux、またはMobX（あなたが行く方法だと思います）に達する前に、通常、店舗のようなものは表示されません。

この例ではcodepenにゲッターとセッターを使用して例を書き直しました。データが変更されたときにオブザーバーパターンを使用しています。 私はこれが（デモを覚えていることを忘れないで）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が表面下で行っていることです。それは自動的なリスナーの能力を提供します、そして、これがあなたが行く計画の方法なら、私は間違いなくこのライブラリを見てアドバイスをします。

自動的にforceUpdate（）を含むすべての「オブザーバー」の詳細を処理します（forceUpdateは使用せず、updataが必要な場合はrender（）メソッドを呼び出します）。 codepen.io