在 React 应用程序中存储逻辑的最佳位置？答案

【问题标题】：The best place to store logic in React app?在 React 应用程序中存储逻辑的最佳位置？
【发布时间】：2017-06-19 15:19:12
【问题描述】：

我有两个组件。例如仪表板和卡片

仪表板：

render() {
        const elements = this.props.cards.map((card, key) => {
            return (
                <Card item={card} onSave={this.onCardSave}>
            )
        })
    }

卡片

render() {
    return (
        <div class="card">
            <input type="checkbox" checked={this.state.item.checked} onChange={this.onChangeChecked} />
            { this.someCondition() && <input type="text" value={this.state.item.name} onChange={this.onChangeName} />}
        </div>
    )
}

因此文本字段的可见性取决于某些条件。例如：

function someCondition () {
    return this.state.item.checked
}

！！此逻辑仅适用于 Card 实例

那么存储此逻辑的最佳位置在哪里？

在卡里面？（就像我的代码）

在仪表板内？（例如传递 props 中的所有事件）

如果你能提供一些关于这个主题的文章，我将非常感激

【问题讨论】：

this article 应该是很好的起点

标签： reactjs

【解决方案1】：

一个正常的方法社区正在使用，是两种类型的独立组件：

表象组件：关注事物的外观。
容器组件：关注事物的工作方式。

但是需要注意的重要一点是：“虽然容器组件往往是有状态的，而展示组件往往是无状态的，但这并不是一个硬性规则。展示组件可以是有状态的，而容器也可以是无状态的。”

就像您的情况一样，您的逻辑示例仅取决于组件的内部逻辑，因此在我看来，最好保留在 Card 组件内。

有用的文章： Redux 的创建者 Dan Abramov： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.kyc0tpd11

【讨论】：

【解决方案2】：

您可以阅读无状态组件与有状态组件（或智能组件与愚蠢组件）。这个SO链接很清楚ReactJS difference between stateful and stateless

在您的示例中，仪表板将保存卡片的状态，因为我猜测您需要知道卡片是否被选中，以便您可以做其他事情（例如切换其他组件的显示） l。如果您在卡片中有此逻辑，则需要尝试在仪表板中引用该逻辑，这会变得烦人且更加困难。

希望有帮助

【讨论】：