4

我有一个单一对象状态驱动的应用程序，其状态分派/订阅逻辑将与 React '流' 分开（即没有像 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 的用途；）），但这超出了这个问题的范围。

4

2 回答 2

5

当你有几个组件时没有什么大的区别，但是当你的应用程序变大时，从顶部重新渲染会导致速度变慢。这就是为什么我建议将单个组件订阅到商店，并且仅在他们关心的状态部分发生变化setState()时才使用。这样，随着应用程序的增长，您的组件将更加高效。

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

于 2016-02-27T22:01:53.430 回答
0

我认为您的组件应该是碰巧在它之外的任何状态的纯函数，但不知道该状态（嗯，尽可能“纯”）。

我在第二个示例中看到了“泄漏实现”，这意味着当您拥有：

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

您将组件本身与应该导致组件重新渲染的功能混为一谈。

您的第一个实现对我来说似乎更合适。此外，第一个实现更可重用。

在您的第二个示例中，如果您想更改数据存储、渲染等的结构怎么办？然后你很可能不得不进入每个单独的组件并对其进行更改。

最重要的是，我绝对更喜欢第一个实现。

于 2016-02-09T01:33:12.147 回答