PureRenderMixin & 状态管理设计答案

【问题标题】：PureRenderMixin & state management designPureRenderMixin & 状态管理设计
【发布时间】：2015-10-13 10:14:03
【问题描述】：

我有一些带有状态的顶级组件 (RegisrationPage)，它们将状态/道具传递给转储底层组件 (InputField、Dropdown、Datepicker)。底层组件在回调的帮助下改变RegistrationPage 的状态。

问题： PureRenderMixin 不起作用，因为我必须绑定传递给底层组件的 state-change-callback。

问题： 如何让PureRenderMixin 以最优雅的方式工作？

我们用代码来解释一下：

输入块：

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 = 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 作为额外属性传递并在底层组件内进行绑定。

【问题讨论】：

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

标签： javascript reactjs mixins

【解决方案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')
        }
    })

【讨论】：