使用 ReactDOM.render() 而不是在其容器组件内重新渲染应用程序——反模式？

Question

我有一个单对象状态驱动的应用程序，它的状态分派/订阅逻辑要与 React 'flow' 分开（即没有像 React-Redux 绑定这样的助手）。

当状态改变时，我的应用程序会重新呈现。

以下两个实现之间有什么区别，或者任何反模式问题？（对不起，任何人不高兴我没有使用 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);

第一个强制从“外部”重新渲染应用程序范围，即使用 ReactDOM。第二个在容器应用程序中做同样的事情。

我已经做了一些性能测试，实际上并没有看到差异。我会在路上遇到问题吗？多次点击 ReactDOM.render() 是一个问题吗？

我知道有些人会评论说这两种方式都可能很昂贵，因为它们各自都重新渲染整个应用程序（这不是 React 的用途 ;) ），但这超出了这个问题的范围。

Answer 1

当你有几个组件时没有太大的区别，但是当你的应用程序变大时，从顶部重新渲染会导致速度变慢。这就是为什么我会推荐订阅各个组件的存储和使用只有setState()当国家的，他们关心的部分已经改变。这样，随着应用程序的增长，您的组件将变得更加高效。

最后，我们不建议您store.subscribe()直接使用。有一个名为React Redux的完整库，它为您进行订阅！当您使用connect()from 时，它会使用该setState()逻辑包装您的组件，因此您不必编写它，您只需指定组件关心的状态部分。此外，React Redux 比您手动编写的代码更高效，因为它包含许多优化。