我开始在Backbone项目中使用Facebook React，到目前为止进展非常顺利。
然而，我注意到一些重复内容潜入了我的React代码。
例如，我有几个类似表单的小部件，它们具有INITIAL、SENDING和SENT等状态。当按下按钮时，需要验证表单，发出请求，然后更新状态。当然，状态与字段值一起保存在Reactthis. state中。
如果这些是主干视图，我会提取一个名为FormView的基类，但我的印象是React既不支持也不支持子类化来共享视图逻辑（如果我错了，请纠正我）。
我在React中看到了两种代码重用方法：
在React中，混合元素和容器优先于继承，这是正确的吗？这是一个深思熟虑的设计决策吗？对于我的第二段中的“表单小部件”示例，使用混合元素或容器组件会更有意义吗？
这是FeedbackWidget和JoinWidget当前状态的要点。它们具有类似的结构，类似的有一个的方法，并且都需要一些验证支持（还没有）。
更新：这个答案已经过时了。如果可以的话，远离混音。我警告过你！混音已经死了。作文万岁
起初，我尝试为此使用子组件并提取FormWidget和InputWidget。然而，我中途放弃了这种方法，因为我想更好地控制生成的输入及其状态。
对我帮助最大的两篇文章：
事实证明，我只需要编写两个（不同的）混合：ValidationMisin和FormMisin。
这是我如何分离它们的。
验证混合添加了方便的方法来在您州的一些属性上运行您的验证器函数，并将“error'd”属性存储在state. error数组中，以便您可以突出显示相应的字段。
define(function () {
'use strict';
var _ = require('underscore');
var ValidationMixin = {
getInitialState: function () {
return {
errors: []
};
},
componentWillMount: function () {
this.assertValidatorsDefined();
},
assertValidatorsDefined: function () {
if (!this.validators) {
throw new Error('ValidatorMixin requires this.validators to be defined on the component.');
}
_.each(_.keys(this.validators), function (key) {
var validator = this.validators[key];
if (!_.has(this.state, key)) {
throw new Error('Key "' + key + '" is defined in this.validators but not present in initial state.');
}
if (!_.isFunction(validator)) {
throw new Error('Validator for key "' + key + '" is not a function.');
}
}, this);
},
hasError: function (key) {
return _.contains(this.state.errors, key);
},
resetError: function (key) {
this.setState({
'errors': _.without(this.state.errors, key)
});
},
validate: function () {
var errors = _.filter(_.keys(this.validators), function (key) {
var validator = this.validators[key],
value = this.state[key];
return !validator(value);
}, this);
this.setState({
'errors': errors
});
return _.isEmpty(errors);
}
};
return ValidationMixin;
});
ValidationMisin有三种方法：valate、hasError和resetError。
它期望类定义验证器对象，类似于propTypes：
var JoinWidget = React.createClass({
mixins: [React.addons.LinkedStateMixin, ValidationMixin, FormMixin],
validators: {
email: Misc.isValidEmail,
name: function (name) {
return name.length > 0;
}
},
// ...
});
当用户按下提交按钮时，我调用验证。对valdit的调用将运行每个验证器并使用包含未通过验证的属性键的数组填充this. state.error。
在我的渲染方法中，我使用hasError为字段生成正确的CSS类。当用户将焦点放在字段中时，我调用resetError来删除错误突出显示，直到下一个验证调用。
renderInput: function (key, options) {
var classSet = {
'Form-control': true,
'Form-control--error': this.hasError(key)
};
return (
<input key={key}
type={options.type}
placeholder={options.placeholder}
className={React.addons.classSet(classSet)}
valueLink={this.linkState(key)}
onFocus={_.partial(this.resetError, key)} />
);
}
表单混合处理表单状态（可编辑、提交、已提交）。您可以使用它在发送请求时禁用输入和按钮，并在发送请求时相应地更新您的视图。
define(function () {
'use strict';
var _ = require('underscore');
var EDITABLE_STATE = 'editable',
SUBMITTING_STATE = 'submitting',
SUBMITTED_STATE = 'submitted';
var FormMixin = {
getInitialState: function () {
return {
formState: EDITABLE_STATE
};
},
componentDidMount: function () {
if (!_.isFunction(this.sendRequest)) {
throw new Error('To use FormMixin, you must implement sendRequest.');
}
},
getFormState: function () {
return this.state.formState;
},
setFormState: function (formState) {
this.setState({
formState: formState
});
},
getFormError: function () {
return this.state.formError;
},
setFormError: function (formError) {
this.setState({
formError: formError
});
},
isFormEditable: function () {
return this.getFormState() === EDITABLE_STATE;
},
isFormSubmitting: function () {
return this.getFormState() === SUBMITTING_STATE;
},
isFormSubmitted: function () {
return this.getFormState() === SUBMITTED_STATE;
},
submitForm: function () {
if (!this.isFormEditable()) {
throw new Error('Form can only be submitted when in editable state.');
}
this.setFormState(SUBMITTING_STATE);
this.setFormError(undefined);
this.sendRequest()
.bind(this)
.then(function () {
this.setFormState(SUBMITTED_STATE);
})
.catch(function (err) {
this.setFormState(EDITABLE_STATE);
this.setFormError(err);
})
.done();
}
};
return FormMixin;
});
它期望组件提供一个方法：sendRequest，它应该返回一个Bluebird Promise。（修改它以使用Q或其他Promise库很简单。）
它提供了方便的方法，如isFormEdable、isFormSub不提交和isForm提交。它还提供了一个启动请求的方法：submitForm。您可以从表单按钮的onClick处理程序中调用它。
我正在用React构建一个SPA（自1年以来一直在生产），我几乎从不使用混合。
我目前对混音的唯一用法是当你想分享使用React生命周期方法的行为时（组件DDMount等）。这个问题可以通过Dan Abramov在他的链接中谈到的高阶组件（或通过使用ES6类继承）来解决。
Mixins也经常在框架中使用，通过使用React的“隐藏”上下文特性，使框架API对所有组件可用。ES6类继承也不再需要这一点。
大多数时候，混合使用，但不是真正需要的，可以更容易地替换为简单的助手。
例如：
var WithLink = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {message: 'Hello!'};
},
render: function() {
return <input type="text" valueLink={this.linkState('message')} />;
}
});
您可以非常轻松地重构LinkedStateMisin代码，以便语法为：
var WithLink = React.createClass({
getInitialState: function() {
return {message: 'Hello!'};
},
render: function() {
return <input type="text" valueLink={LinkState(this,'message')} />;
}
});
有什么大的区别吗？
