4

私は、状態ディスパッチ/サブスクライブ ロジックが React の「フロー」から分離されている (つまり、React-Redux バインディングのようなヘルパーがない) 単一オブジェクトの状態駆動型アプリケーションを持っています。

状態が変わると、アプリが再レンダリングされます。

次の 2 つの実装に違いはありますか、またはアンチパターンの問題はありますか? （私がJSXを使用していないことに腹を立てている人には申し訳ありません）

var myElementClass = React.createClass(
   render : function() {
      //make use of this.props.state...
   }
);

var myAppContainerComponent = React.createElement(
  myElementClass,
  {state : dataStore.getState()}
);

dataStore.onChange(function(){
  ReactDOM.render(myAppContainerComponent, someDOMContainer);
});

対...

var myElementClass = React.createClass(
   componentDidMount : function() {
      var self = this;
      this.props.store.onChange(function(){
         self.setState(self.props.store.getState());
      });
   },
   render : function() {
      //make use of this.state...
   }
);

var myAppContainerComponent = React.createElement(
   myElementClass,
   {store : dataStore}
);

ReactDOM.render(myAppContainerComponent, someDOMContainer);

1 つ目は、「外部」から、つまり ReactDOM を使用して、アプリ全体の再レンダリングを強制します。2 つ目は、コンテナー アプリ内で同じことを行います。

いくつかのパフォーマンス テストを行いましたが、実際には違いは見られません。今後問題が発生することはありますか? ReactDOM.render() を何度も叩くのは問題ですか?

アプリ全体をそれぞれ再レンダリングしているため、両方の方法がおそらく高価であるとコメントする人もいると思いますが（Reactの目的ではありません;））、それはこの質問の範囲外です。

4

2 に答える 2

5

コンポーネントが少ない場合は大きな違いはありませんが、アプリが大きくなると、上から再レンダリングすると速度が低下します。これが、個々のコンポーネントをストアにサブスクライブし、関心のある状態の部分が変更されたsetState()場合にのみ使用することをお勧めする理由です。このようにして、アプリの成長に合わせてコンポーネントのパフォーマンスが大幅に向上します。

store.subscribe()最後に、直接使用することはお勧めしません。あなたのためにサブスクリプションを行うReact Reduxと呼ばれるライブラリ全体があります! そこから使用connect()すると、そのロジックでコンポーネントがラップされるsetState()ため、記述する必要がなく、コンポーネントが気にする状態の部分を指定するだけで済みます。また、React Redux は多くの最適化が含まれているため、手動で記述するコードよりも効率的です。

于 2016-02-27T22:01:53.430 に答える
0

あなたのコンポーネントは、たまたまその外側にある状態の純粋な関数であるべきだと思いますが、その状態を認識していません（まあ、それが合理的に可能な限り「純粋」です）。

2 番目の例では、「リーキーな実装」が見られます。これは、次の場合を意味します。

componentDidMount : function() {
  var self = this;
  this.props.store.onChange(function(){
     self.setState(self.props.store.getState());
  });
},

コンポーネント自体を、コンポーネントの再レンダリングを引き起こすはずの関数と混同しています。

あなたの最初の実装は、私にとってより適切なようです。さらに、最初の実装はより再利用可能です。

2 番目の例で、データ ストア、レンダリングなどの構造を変更したい場合はどうしますか? 次に、すべてのコンポーネントにアクセスして、それも変更する必要があります。

要するに、私は間違いなく最初の実装の方が好きです。

于 2016-02-09T01:33:12.147 に答える