Javascript PureRenderMixin&；状态管理设计

我有一些带有状态的顶级组件（

registrationpage

），它将状态/道具传递给转储底层组件（

InputField

，

下拉列表

，

日期选择器

）。 底层组件在回调的帮助下更改注册页面的状态

问题：PureRenderMixin无法工作，因为我必须绑定传递给底层组件的状态更改回调

问题：如何使

PureRenderMixin

以最优雅的方式工作

让我们用代码来解释它：

输入块：

注册页面：

RegistrationPage=React.createClass（{
/**
*由于所有状态均由“RegistrationPage”持有，底层组件为转储，
*I do _onFieldChange.bind-_onFieldChange应该知道应该更改哪个字段
*/
render（）{
返回CreateFragment({
电邮：，
名字：，
.........
});
},
_onFieldChange（键、事件）{
//保存已注册的进度以存储并重新呈现组件
AppActionCreators.saveRegisterProgress（this.state）；
}
})

---

我的解决方法：只需将

inputFieldName

作为额外属性传递，并在底层组件内部进行绑定。

问题在于

。bind（）

每次调用它时都返回一个新函数。为了避免这种情况，您应该在渲染之外创建函数。例如：

    RegistrationPage = React.createClass({  
        render() {
            return CreateFragment({
                email: <InputBlock
                    input={this.state.email}
                    onChange={this._onEmailChange}/>,
                firstName: <InputBlock
                    input={this.state.firstName}
                    onChange={this._onFirstNameChange}/>,
                .........
            });
        },

        _onFieldChange(key, event) {
            //Save registered progress to store and re-render the component
            AppActionCreators.saveRegisterProgress(this.state);
        }

        _onEmailChange() {
            this._onFieldChange('email')
        }

        _onFirstNameChange() {
            this._onFieldChange('firstName')
        }
    })

RegistrationPage=React.createClass（{
render（）{
返回CreateFragment({
电邮：，
名字：，
.........
});
},
_onFieldChange（键、事件）{
//保存已注册的进度以存储并重新呈现组件
AppActionCreators.saveRegisterProgress（this.state）；
}
_onEmailChange（）{
此。_onFieldChange（'电子邮件'）
}
_onFirstNameChange（）{
此.\u onFieldChange（'firstName'））
}
})

您是否考虑过使用flux商店？我宁愿将onChange中的值存储到通量存储中，而不是使用基于回调的方法approach@DERIIIFranz请解释一下你的意思看看：或者与@DERIIIFranz结合使用，我没有这么多数据来证明像Immutable.js这样的持久数据结构的合理性。facebook流量呢？我都读过了。你能举个例子吗？

RegistrationPage = React.createClass({  

    /**
     * Since all state is held by `RegistrationPage` and bottom-level components are dump,
     * I do _onFieldChange.bind - _onFieldChange should know which field should be changed
     */
    render() {
        return CreateFragment({
            email: <InputBlock
                input={this.state.email}
                onChange={this._onFieldChange.bind(self, 'email')}/>,
            firstName: <InputBlock
                input={this.state.firstName}
                onChange={this._onFieldChange.bind(self, 'firstName')}/>,
            .........
        });
    },

    _onFieldChange(key, event) {
        //Save registered progress to store and re-render the component
        AppActionCreators.saveRegisterProgress(this.state);
    }
})

    RegistrationPage = React.createClass({  
        render() {
            return CreateFragment({
                email: <InputBlock
                    input={this.state.email}
                    onChange={this._onEmailChange}/>,
                firstName: <InputBlock
                    input={this.state.firstName}
                    onChange={this._onFirstNameChange}/>,
                .........
            });
        },

        _onFieldChange(key, event) {
            //Save registered progress to store and re-render the component
            AppActionCreators.saveRegisterProgress(this.state);
        }

        _onEmailChange() {
            this._onFieldChange('email')
        }

        _onFirstNameChange() {
            this._onFieldChange('firstName')
        }
    })