Question

我正在使用Reactstrap和自定义React.PureComponent，它们由组合的Reactstrap组成。另外，我使用顶级React组件存储所有应用程序状态，并通过道具传递render()函数所需的数据。

...
<Container>
    <AppTabs
        main_tab={
            <MainTab
                general_change={this.general_change}
                submit_form={this.submit_form}
                ... other props

                group_widget={<GroupWidget
                    general_change={this.general_change}
                    groups={this.state.groups}
                    group_select_hndl={this.group_select_hndl}
                />}

                bootstrap_action={<BootstrapAction
                    general_change={this.general_change}
                    available_actions={this.state.available_actions}
                    bootstrap_action={this.state.bootstrap_action}
                />}
            />
        }
        mac_tab={
            <MacTab
                general_change={this.general_change}
                submit_form_macs={this.submit_form_macs}
                save_mac_status={this.state.save_mac_status}
            />
        }

        group_change_hndl={this.group_change_hndl}
        general_change={this.general_change}
    >
    </AppTabs>
</Container>
...

这是general_change()函数的代码

general_change(event) {
    let state_id = event.target.name;
    let update_state = {};
    update_state[state_id] = event.target.value;
    this.setState(update_state);
}

我用它来保存用户输入字段中的数据。

理论上，如果道具未更改，则PureComponent不应重新呈现。但是在我的情况下，输入字段中的任何击键或用户单击单选按钮时触发重新呈现。我使用React浏览器扩展看到它。我想知道为什么会这样吗？因为选择不同的单选按钮会更改状态变量中一个字段的值。而且只有一个组成部分将通过道具获得新的价值。其余所有组件都具有相同的值。

为限制不必要的转播，我可能可以使用shouldComponentUpdate()。但是为什么PureComponent在我的情况下不起作用？

当仅更改一个状态字段时，如何避免重新渲染所有React纯组件？

0 个答案: