React容器组件和展示组件

Presentational and Container Components   展示组件   - 只关心它们的样子。   - 可能同时包含子级容器组件和展示组件，一般含DOM标签和自定的样式。   - 通常用this.props.children来包含其他组件   - 不依赖app其它组件，比如flux的actions和stores   - 不会定义数据如何读取，如何改变   - 只通过this.props接受数据和回调函数   - 很少有自己的状态变量，即使有，也是UI的状态变量，比如toggleMenuOpen,InputFocus   - 一般是函数级组件，除非它们需要状态，lifecycle hooks，优化处理。   容器组件   - 只关心它们的运作方式。   - 可能同时包含子级容器组件和展示组件，但大都不含DOM标签，而含他们自己所用的wrapping div，从不用自己的样式。   - 为展示组件或其他组件提供数据和方法。   - 调用Flux的actions，并且将其作为展示组件的回调函数。   - 维持许多状态变量，通常充当一个数据源。   - 通常由高阶组件生成，比如Redux里的connect()，Relay里的createContainer()，Flux Utils里的Container.create()，而非手工写出（译者：可能在meteor中数据是例外吧）   - 例子有UserPage, FollowersSidebar, StoryContainer, FollowedUserList。                                                            

转载于:https://www.cnblogs.com/wy1935/p/7092900.html

• 点赞
• 收藏
• 分享
• 文章举报

anke5248 发布了0 篇原创文章 · 获赞 0 · 访问量 256 私信 关注