Question

有3个反应成分，其中两个在第一个内部。第一个组件包含一些仅在第三个组件中使用的状态。当我从第三个组件更新状态与回调反应另外更新第二个组件。但第二个组件没有变化。

为什么会发生这种情况以及如何避免呢？

这是我的代码：

var app = React.createClass({
    displayName: 'app',

    settingsChanged: function (value) {
        console.log('app.settingsChanged');
        this.setState({ settings: { value: value } });
    },

    getInitialState: function() {
        return { settings: { value: 1 } }
    },

    render: function() {
        return (
            React.createElement('div', null,
                React.createElement(component1),
                React.createElement(component2, { settings: this.state.settings, settingsChanged: this.settingsChanged })
            )
        );
    }
})

var component1 = React.createClass({
    displayName: 'component1',

    render: function () {
        console.log('component1.render');
        return (
            React.createElement('div', null, 'component1')
        );
    }
})

var component2 = React.createClass({
    displayName: 'component2',

    tbValueChanged: function(e) {
        this.props.settingsChanged(e.target.value);
    },

    render: function () {
        console.log('component2.render');
        return (
            React.createElement('div', null,
                React.createElement('div', null, 'component2'),
                React.createElement('input', { value: this.props.settings.value, onChange: this.tbValueChanged })
            )
        );
    }
})

在控制台中我看到了：

component1.render app.js:27
component2.render app.js:42
app.settingsChanged app.js:5
component1.render app.js:27
component2.render app.js:42

http://jsfiddle.net/67m0z3ts/1/

Answer 1

您可以使用方法 shouldComponentUpdate 阻止React呈现。因此，您必须向component1添加以下代码行：

    getInitialState : function(){
        return {
            shouldUpdate: true
        }
    },
    shouldComponentUpdate: function(nextProps, nextState){
        return nextState === this.state.shouldUpdate
    },

还有 Fiddle Link

我希望它会对你有所帮助！

由于

Answer 2

实际上发生的是正常行为，一旦主要组件发生变化，主要组件中的所有组件都将再次呈现。

但好消息是您可以使用shouldComponentUpdate()更改此默认行为，默认情况下为true。请看react.js documentation in advanced performance。

我希望有所帮助。

祝你好运

Answer 3

我不想在此处详细介绍，但除了其他回复之外，您还可以尝试从React启用PureRenderMixin。来自文档：

在幕后，mixin实现了shouldComponentUpdate，其中它将当前道具和状态与下一个道具进行比较，如果等值通过，则返回false。

反应：不必要的组件更新

3 个答案: