PureRenderMixin & state management design

Question

我有一些顶级组件(RegisrationPage)与状态，它传递状态/道具转储底层组件(InputField, Dropdown, Datepicker)。底层组件通过回调来改变RegistrationPage的状态。

问题: puerendermixin不工作，因为我必须绑定传递给底层组件的state-change-callback。

问题: 如何使PureRenderMixin以最优雅的方式工作?

让我们用代码来解释一下:

InputBlock:

const React = require('react'),
      PureRenderMixin = require('react-addons-pure-render-mixin');
module.exports =  React.createClass({
    mixins: [PureRenderMixin],
    propTypes: {
        input: React.PropTypes.string,
        onChange: React.PropTypes.func
    },
    render() {
        //PROBLEM - is re-rendered each time , since onChange callback each time is an different object due bind method call
    }
});

RegistrationPage:

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);
    }
})

---

我的解决方法:只是传递inputFieldName作为额外的属性，并在底层组件内做绑定。

Answer 1

问题是.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')
        }
    })