拆分一个非常大的反应类答案

【问题标题】：Split a very big react class拆分一个非常大的反应类
【发布时间】：2015-12-24 16:24:39
【问题描述】：

我创建了一个非常大的（500loc，它非常大且难以推理）反应类。它是一个自动完成功能。用反应/回流将其分开的推荐方法是什么。将逻辑添加到 som 服务？什么是最佳做法。我有商店，但据我了解，它们不应包含视图逻辑。

【问题讨论】：

举个例子会很有帮助。

标签： reactjs refluxjs

【解决方案1】：

鉴于您尚未提供组件背后的代码，很难具体说明您的情况，但如果我要开发一个自动完成组件，我会按如下方式进行。

Facebook 的 Thinking in React 指南建议将您的 UI 分解为代表数据模型单个方面的组件：

在您的情况下，您可以实现以下层次结构：

AutoComplete
|
 --AutoCompleteInput
  |
  AutoCompleteResults (list of results)
  |
   --AutoCompleteResult (individual result)

所以在一个非常高的水平...... 自动完成.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 将使用数据服务方法来获取特定查询的自动完成选项。然后，成功回调将负责将返回的数据传递给存储。理想情况下，存储应该通知订阅的组件它已收到新数据。

虽然这是一个简单的概述，但结果是驱动自动完成功能的组件被分解以尊重单一职责，这应该会简化您的测试。

【讨论】：