反应:不必要的组件更新

React: unnecessary component update

本文关键字：组件 更新 不必要 反应      更新时间：2023-09-26

有 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/

实际上，

正在发生的事情是一种正常行为，一旦主组件中发生了某些变化，该主组件中的所有组件都将再次渲染。

但是好消息是您可以使用 shouldComponentUpdate() 更改此默认行为，默认情况下这是正确的。查看高级性能中的 react.js 文档。

我希望这有所帮助。

祝你好运

你可以用方法阻止 React 渲染 shouldComponentUpdate.因此，您必须向组件添加以下代码行1：

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

还有小提琴链接

希望对您有所帮助！

谢谢

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

在引擎盖下，mixin 实现 shouldComponentUpdate ，其中它将当前的道具和状态与下一个道具和状态进行比较，并在等式通过时返回false。

相关文章：