mobx observerを制御するにはどうしたらいいですか？

Question

react-mobxにオブザーバ機能を使用したときに問題が発生しました。 studentオブジェクトが変更された場合は、次のような
マイソースコード、

import React from 'react'; 
import { observer } from 'mobx-react'; 

@observer 
class Test extends React.Component{ 
    render(){ 
    const { student } = this.props; // it's @observable object 

    return (
     <div>{student.name}</div> 
    ) 
    } 
} 

このコンポーネントは、再レンダリングされます。
しかし、再レンダリングするタイミングを制御したい。

要するに、このコンポーネントが再レンダリングされる時点を把握したいと思います。
（studentのコンポーネントが変更されたことを意味します）
これはshouldComponentUpdateと似ています。
私はshouldComponentUpdateを使って制御できると思いました。それは動作しません。

どうすればこのように制御できますか？
最終的な結果は、再レンダリング時にstudentコンポーネントに特定のパラメータがある場合、再レンダリングしたくないということです。

Answer 1

あなたが質問に答えるために、実際には猿によってshouldComponentUpdate方法パッチ適用、それを行うための一つの方法（非常にハック）があります：

@observer 
class Test extends React.Component { 

    constructor(props) { 
    super(props); 
    this.mobxShouldComponentUpdate = this.shouldComponentUpdate; 
    this.shouldComponentUpdate = this.customShouldComponentUpdate; 
    } 

    customShouldComponentUpdate = (props, ...args) => { 
    if (props.student === 'foo') { 
     return false; 
    } 
    return this.mobxShouldComponentUpdate(props, ...args); 
    } 

    render(){ 
    const { student } = this.props; // it's @observable object 
    return (
     <div>{student.name}</div> 
    ) 
    } 
} 

これは通常、あなたが考えている兆候である、と述べましたデータを間違った方法で理想的には、コンポーネントはアプリケーションの現在の状態の純粋なレンダリング関数である必要があります。

class Test extends React.Component { 
    render(){ 
    if (student.name === 'foo') { 
     return <div>Custom info</div> 
    } 
    return (
     <div>{student.name}</div> 
    ) 
    } 
} 

Answer 2

MWeststrate、MobXの開発者の1は、トラッキング動作をカスタマイズする方法はありませんポスト

でこれを言いました。考え方全体では、shouldComponentDidUpdateを自分で実装してはならないということです。オブザーバはレンダリングの最後の実行で実際に使用されているオブザーバブルにのみ反応します（したがって、falsyを返すif文の後ろにあるオブザーバブルには反応しません）。これをカスタマイズすることができれば、MobXの基本的な保証を破ることができます。ビューは常に状態と同期しており、望ましい状況ではありません。

リンク：https://github.com/mobxjs/mobx-react/issues/230

あなたは再レンダリングを制御したいと思う理由は、あなたがして、学生を更新延期またはrunInActionオフ助けを借りて、一度にすべての更新を行うことはできませんか？