Question

我在客户端制作一个所见即所得的编辑器，其顶层渲染功能为NewProjectContainer：

render () {
    return (
        <div className="blog-post">
            <TitleContainer   user={this.props.user}/>
            <ContentContainer user={this.props.user}/>
        </div>
    )
}

TitleContainer和ContentContainer都可以被编辑，并且应该保存到本地存储中，并且在卸载时，保存到后端数据库。当前，每个组件都有其自己的saveLocal和saveDb函数，这显然是一种反模式。理想情况下，子节点应将其内容移交给父节点NewProjectContainer，然后由父节点处理保存逻辑。 React是否同意这是做事的“理智”方式？如果是这样的话，React中是否有语言结构（在这里是我的新手）？最简单的方法是将函数作为道具传递，但这听起来很奇怪，我在这里错了吗？

Answer 1

您要避免的陷阱之一是让您的状态分散到整个应用程序中。

这是我的建议：

首先将整个应用程序状态包含在NewProjectContainer中，然后将函数和属性作为prop传递下来。理想情况下，TitleContainer和ContentContainer将是纯组件，这意味着它们没有自己的反应状态（this.state）。然后，您将在父容器内分离所有API调用和业务逻辑，并使用子代仅用于显示。
一旦您的应用程序扩展到超过3个组件，您可能需要查看一种状态管理解决方案。最受欢迎的是redux和mobx。在线上有很多关于如何入门的教程。这些库将帮助您构建处理状态和副作用（API调用和其他异步操作）的方式

React.js设计模式：从* parent *节点保存具有多个字段的可编辑文档

1 个答案: