Question

我有一个RefluxJS应用程序，它有几个存储和一个非常深的组件层次结构。我试图使组件非常独立，每个组件都连接到它需要渲染的商店;商店本身有时会调用其他商店听的动作。

我发现我对组件的render（）方法进行了大量的虚假调用，因为两个存储可能会侦听相同的操作，而层次结构中的不同组件可能会侦听这些不同的存储。这会影响用户体验，因为有时会有一点滞后。

以下是一些代码：

var Actions = Reflux.createActions(['changeUser']);
Actions.changeUser.preEmit = () => console.log('Action emit: changeUser');

var UserStore = Reflux.createStore({
  listenables: [Actions],

  onChangeUser(user) {
    this.trigger(user);
  }
});

var MessageStore = Reflux.createStore({
  listenables: [Actions],

  onChangeUser(user) {
    setTimeout(() => {
      // pretend we had to go to an API or something to get this
      var message = "Welcome to the app!";
      this.trigger(message);
    }, 500);
  },
});

var App = React.createClass({
  mixins: [Reflux.connect(UserStore, 'user')],

  render() {
    console.log('Component render: App');

    if (!this.state.user) {
      return (
        <button onClick={() => Actions.changeUser('Some User')}>
          Click to make stuff happen
        </button>
      );
    }

    return (
      <div>
        <div>Hello, {this.state.user}.</div>
        <Message / >
      </div>
    );
  }
});

var Message = React.createClass({
  mixins: [Reflux.connect(MessageStore, 'message')],

  render() {
    console.log('Component render: Message');

    return <div>Your message: {this.state.message}</div>;
  }
});

ReactDOM.render( <App/> , document.getElementById('app'));

小提琴：https://jsfiddle.net/9xwnxos6/

这是过于简化的方式（在这个例子中我可能只是添加某种加载指示器），但是说明了在你做事时你可以看到UI转换到中间状态的基本问题。 / p>

如何改善我的React / Reflux设计，以避免单次互动引发多次渲染？

Answer 1

我的问题似乎来自违反一些良好的React / Flux做法：

不要在商店内触发操作
仅连接到高级组件中的商店

我正在重构以从低级组件中获取Store连接。我并不为此疯狂，因为这意味着我必须通过这些深层组件层次结构传递各种道具才能将它们带到需要的位置。但似乎这是构建Reflux应用程序的“正确”方式。

如果没有其他人在接下来的几天内发布答案，我会接受这个答案。

ReactJS render（）方法在复杂的RefluxJS应用程序中经常被调用

1 个答案: