分裂反应很大class
Split a very big react class
我创建了一个非常大的(500loc,它非常大且难以推理)反应class。它是一个自动完成。用 react/reflux 拆分它的推荐方法是什么?将逻辑添加到 som 服务?什么是最佳实践。我有商店,但据我了解,它们不应包含视图逻辑。
鉴于您没有提供组件背后的代码,因此很难针对您的情况进行具体说明,但如果我要开发一个自动完成组件,我会按如下方式进行。
Facebook 的 Thinking in React 指南建议将您的 UI 分解为代表数据模型单个方面的组件:
对于您的情况,您可以实现以下层次结构:
AutoComplete
|
--AutoCompleteInput
|
AutoCompleteResults (list of results)
|
--AutoCompleteResult (individual result)
所以在一个非常高的水平...
AutoComplete.jsx:
[...]
render() {
return (
<div>
<AutoCompleteInput />
<AutoCompleteResults />
</div>
);
}
AutoCompleteInput.jsx:
[...]
updateQuery(e) {
// FYI - you should ideally throttle this logic
autoCompleteActions.updateQuery(e.target.value);
}
render() {
return <input onChange={this.updateQuery} />
}
AutoCompleteResults.jsx:
[...]
onStoreUpdated() { // hypothetically invoked when store receives new data
this.setState({
results: productListStore.getResults()
});
}
render() {
const { results } = this.state;
const children = results.map(result => {
return <AutoCompleteResult result={result} />
});
return (
<ul>
{children}
</ul>
);
}
你说商店不应该包含视图逻辑是正确的,但它们可以存储一般的应用程序状态和由 XHR 产生的数据,例如。在上面的示例中,autoCompleteActions.updateQuery
将使用数据服务方法来获取特定查询的自动完成选项。然后,成功回调将负责将返回的数据传递给商店。理想情况下,商店应该通知订阅的组件它已收到新数据。
虽然这是一个简单的概述,但结果是驱动自动完成功能的组件被分解以尊重单一职责,这应该会简化您的测试。
我创建了一个非常大的(500loc,它非常大且难以推理)反应class。它是一个自动完成。用 react/reflux 拆分它的推荐方法是什么?将逻辑添加到 som 服务?什么是最佳实践。我有商店,但据我了解,它们不应包含视图逻辑。
鉴于您没有提供组件背后的代码,因此很难针对您的情况进行具体说明,但如果我要开发一个自动完成组件,我会按如下方式进行。
Facebook 的 Thinking in React 指南建议将您的 UI 分解为代表数据模型单个方面的组件:
对于您的情况,您可以实现以下层次结构:
AutoComplete
|
--AutoCompleteInput
|
AutoCompleteResults (list of results)
|
--AutoCompleteResult (individual result)
所以在一个非常高的水平... AutoComplete.jsx: [...]
render() {
return (
<div>
<AutoCompleteInput />
<AutoCompleteResults />
</div>
);
}
AutoCompleteInput.jsx:
[...]
updateQuery(e) {
// FYI - you should ideally throttle this logic
autoCompleteActions.updateQuery(e.target.value);
}
render() {
return <input onChange={this.updateQuery} />
}
AutoCompleteResults.jsx:
[...]
onStoreUpdated() { // hypothetically invoked when store receives new data
this.setState({
results: productListStore.getResults()
});
}
render() {
const { results } = this.state;
const children = results.map(result => {
return <AutoCompleteResult result={result} />
});
return (
<ul>
{children}
</ul>
);
}
你说商店不应该包含视图逻辑是正确的,但它们可以存储一般的应用程序状态和由 XHR 产生的数据,例如。在上面的示例中,autoCompleteActions.updateQuery
将使用数据服务方法来获取特定查询的自动完成选项。然后,成功回调将负责将返回的数据传递给商店。理想情况下,商店应该通知订阅的组件它已收到新数据。
虽然这是一个简单的概述,但结果是驱动自动完成功能的组件被分解以尊重单一职责,这应该会简化您的测试。