javascript - react : unnecessary component update

Question

有 3 个 React 组件，其中两个位于第一个组件内。第一个组件包含一些仅在第三个组件中使用的状态。当我使用回调更新第三个组件的状态时， react 还会更新第二个组件。但第二个组件没有变化。

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

这是我的代码:

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.js documentation in advanced performance .

希望对您有所帮助。

祝你好运