Open ZWkang opened 5 years ago
文章地址
这里有一些简单的模式，当我写react应用的时候经常用到，如果你一直在走react，你也许早已经发现过它，这篇文章解释得很好，但我想补充几点。 如果将它们分为两类，你会发现你的组件更容易重用和合理，我称他们为容器组件，演示组件
关心组件长啥样 可能包含表示组件和容器组件，通常里面有自己的一些DOM标记和样式 - 经常允许通过this.props.children容纳 对应用程序的其他部分没有依赖关系，例如Flux操作或store 不要指定数据如何加载或者如何变化 获取数据和callback只通过props 很少拥有他们自己的状态（当他们这样做的话，它应该是UI状态而不是数据） 类似功能组件编写，除非它们需要状态，生命周期挂钩或性能优化。 例如： Page, Sidebar, Story, UserInfo, List
关心组件干什么 可能包含容器组件展示组件，在内部但通常没有任何自己的DOM标记，除了一些包装divs，并且从来没有任何样式。 将数据与行为给展示组件或者其它容器组件 调用Flux action并将它们作为回调传递给展示组件 往往是有状态的，因为它们倾向于作为数据源。 通常使用高阶组件生成，例如React Redux的connect（），Relay的createContainer（）或Flux Utils的Container.create（），而不是手工编写。 Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList. -
更好的分离问题。 通过这种方式编写组件，您可以更好地理解您的应用和用户界面 - 更好的可重用性。 您可以将完全不同的状态源使用相同的表示组件，并将它们转换为可以进一步重用的单独的容器组件。 演示组件基本上是您的应用程序的“调色板”。 您可以将它们放在单个页面上，让设计师调整所有变体，而不必触摸应用程序的逻辑。 您可以在该页面上运行屏幕截图回归测试。 这迫使您提取诸如侧边栏，页面，上下文菜单等“布局组件”并使用this.props.children，而不是在多个容器组件中复制相同的标记和布局。 请记住，组件不必发出DOM。 他们只需要在UI关注点之间提供构图边界。
文章地址
这里有一些简单的模式，当我写react应用的时候经常用到，如果你一直在走react，你也许早已经发现过它，这篇文章解释得很好，但我想补充几点。 如果将它们分为两类，你会发现你的组件更容易重用和合理，我称他们为容器组件，演示组件
我的展示组件
关心组件长啥样 可能包含表示组件和容器组件，通常里面有自己的一些DOM标记和样式 - 经常允许通过this.props.children容纳 对应用程序的其他部分没有依赖关系，例如Flux操作或store 不要指定数据如何加载或者如何变化 获取数据和callback只通过props 很少拥有他们自己的状态（当他们这样做的话，它应该是UI状态而不是数据） 类似功能组件编写，除非它们需要状态，生命周期挂钩或性能优化。 例如： Page, Sidebar, Story, UserInfo, List
我的容器组件
关心组件干什么 可能包含容器组件展示组件，在内部但通常没有任何自己的DOM标记，除了一些包装divs，并且从来没有任何样式。 将数据与行为给展示组件或者其它容器组件 调用Flux action并将它们作为回调传递给展示组件 往往是有状态的，因为它们倾向于作为数据源。 通常使用高阶组件生成，例如React Redux的connect（），Relay的createContainer（）或Flux Utils的Container.create（），而不是手工编写。 Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList. -
一般放置在不同文件夹下
更好的分离问题。 通过这种方式编写组件，您可以更好地理解您的应用和用户界面 - 更好的可重用性。 您可以将完全不同的状态源使用相同的表示组件，并将它们转换为可以进一步重用的单独的容器组件。 演示组件基本上是您的应用程序的“调色板”。 您可以将它们放在单个页面上，让设计师调整所有变体，而不必触摸应用程序的逻辑。 您可以在该页面上运行屏幕截图回归测试。 这迫使您提取诸如侧边栏，页面，上下文菜单等“布局组件”并使用this.props.children，而不是在多个容器组件中复制相同的标记和布局。 请记住，组件不必发出DOM。 他们只需要在UI关注点之间提供构图边界。