PureRenderMixin和状态管理设计

我有一些顶级组件（RegisrationPage）与状态，它通过它状态/道具转储底层组件（InputField,Dropdown,Datepicker）。底层组件在回调的帮助下更改RegistrationPage的状态。PureRenderMixin和状态管理设计

问题： PureRenderMixin不工作，因为我有绑定传递给下一级的组件状态更改回调。

问：如何使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作为额外属性并在底层组件内进行绑定。

来源

2015-10-13 Volodymyr Bakhmatiuk

您是否考虑过使用flux-store？我宁愿将onChange中的值存储到flux-store中，而不是使用基于回调的方法 – FranBran

@DERIIIFranz请解释您的意思 –

看看如何：https：//facebook.github.io/flux/docs /overview.html – FranBran

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

来源

2016-04-26 06:27:17 wuct

PureRenderMixin和状态管理设计

回答

相关问题