如何使用 flux/reactjs 减少控制器视图中的渲染调用

Question

我正在从事 React Flux 架构的项目。我的控制器视图看起来像

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());
    }
});

我在渲染函数中有一些嵌套视图，在某些视图中所做的每个更改都会导致控制器视图渲染函数运行。这会导致所有嵌套组件的渲染功能也变为运行，但唯一的变化将发生在 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;
}

该方法接收状态和道具更新，因此您可以确定该组件的任何数据是否已更改。如果不是，return false，该组件将不会呈现。

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

如何使用 flux/reactjs 减少控制器视图中的渲染调用

How to decrease render calls in controller view with flux/reactjs

javascript

reactjs

reactjs-flux

react-jsx