javascript - 如何使用 Flux/ReactJS 减少 Controller View 中的渲染调用

Question

我正在开发带有 React Flux 架构的项目。我的 Controller View 看起来像

var MyComponent = React.createClass({
    getInitialState: function() {
        return MyStore.getData();
    },
    render: function() {
        return <ul className="navigation">
                   <UserControl/>
                   <NavigationBar change={this._onChange} messageCounter={this.state.data.score}/>
               </ul>
    },
    _onChange: function() {
        this.setState(Store.getData());
    }
});

我在渲染函数中有一些嵌套 View ，并且在某些 View 中所做的每个更改都会导致 Controller View 渲染函数运行。这会导致所有嵌套组件的渲染函数也运行，但唯一的变化将发生在 UserControl 组件上。我不需要运行所有嵌套组件的渲染函数。

如何解决？
这是通量架构的行为吗？
如何减少渲染函数调用次数？

Answer 1

简短的答案是重写 shouldComponentUpdate 方法: http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

该方法接收状态和属性更新，因此您可以确定该组件的任何数据是否已更改。如果不是，则返回 false，并且该组件将不会呈现。

更重要的是，您真的需要担心那些额外的渲染吗？如果您没有看到真正的性能问题，我会保留它。这是 React 的 DOM 操作方法的主要优点之一。如果组件呈现，并且没有任何更改，则 DOM 将保持不变。