Javascript 反应：不必要的组件更新

有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

---

您可以使用方法阻止React渲染。 因此，您必须在组件1中添加以下代码行：

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

还有

我希望它能帮助你

---

谢谢

您可以使用方法阻止React渲染。 因此，您必须在组件1中添加以下代码行：

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

还有

我希望它能帮助你

---

谢谢

事实上，发生的是一种正常的行为，一旦主组件中发生了某些更改，该主组件中的所有组件都将再次呈现

但好消息是，您可以使用

shouldComponentUpdate（）

更改此默认行为，这在默认情况下是正确的。看

我希望这有帮助

---

祝你好运

实际上发生的是一种正常的行为，一旦主组件中发生了某些更改，该主组件中的所有组件都将再次呈现

但好消息是，您可以使用

shouldComponentUpdate（）

更改此默认行为，这在默认情况下是正确的。看

我希望这有帮助

---

祝你好运

我不想在这里详细介绍，但是除了其他回复之外，你可以尝试启用from React。从文档中：

在引擎盖下，mixin实现了

shouldComponentUpdate

，其中它将当前的道具和状态与下一个道具和状态进行比较，如果相等通过，则返回

false

---

我不想在这里详细介绍，但是除了其他回复之外，您可以尝试启用from React。从文档中：

在引擎盖下，mixin实现了

shouldComponentUpdate

，其中它将当前的道具和状态与下一个道具和状态进行比较，如果相等通过，则返回

false

---

在component2中，为什么要React.createElement（'input'，{value:this.props.settings.value，onChange:this.tbValueChanged}），尽管没有为此组件设置？？？为component2设置，但没有为组件1设置。我不明白为什么它们都被更新了，但应该只是第二次。你能把它放在JSFIDLE或plnkr中吗？我更新了帖子，结果在控制台browserIn组件2中，为什么要React.createElement（'input'，{value:this.props.settings.value，onChange:this.tbValueChanged}），尽管未设置此组件的设置，但已设置组件2的设置，但未设置组件1的设置。我不明白为什么它们都被更新了，但应该只是第二次。你可以把它放在JSFIDLE或plnkr中吗？我更新了帖子，在控制台浏览器中更新了结果，虚拟dom怎么办，只改变了什么？它正在做！无论何时状态发生变化（默认情况下），React都会对您的呈现方法进行修改，但只会应用于DOM上上一个DOM之间的差异。那么虚拟DOM如何，只更改已更改的内容？它正在这样做！React将在状态更改时（默认情况下）显示您的渲染方法，但将仅应用于DOM与上一个DOM之间的差异。