[react] 展示组件和容器组件有什么区别？

Posted 2021-12-20 前端小歌谣

[react] 展示组件和容器组件有什么区别？

展示组件（Presentational Component）
关注页面的展示效果（外观）
内部可以包含展示组件和容器组件，通常会包含一些自己的DOM标记和样式(style)
通常允许通过this.props.children方式来包含其他组件。
对应用程序的其他部分没有依赖关系，例如Flux操作或store。
不用关心数据是怎么加载和变动的。
只能通过props的方式接收数据和进行回调(callback)操作。
很少拥有自己的状态，即使有也是用于展示UI状态的。
会被写成函数式组件除非该组件需要自己的状态，生命周期或者做一些性能优化。
Example：Page，Header,Sidebar,UserInfo,List

容器组件（Container Component）
关注应用的是如何工作的
内部可以包含容器组件和展示组件，但通常没有任何自己的DOM标记，除了一些包装divs，并且从不具有任何样式。
提供数据和行为给其他的展示组件或容器组件。
调用Flux操作并将它们作为回调函数提供给展示组件。
往往是有状态的，因为它们倾向于作为数据源
通常使用高阶组件生成，例如React Redux的connect（），Relay的createContainer（）或Flux Utils的Container.create（），而不是手工编写。
Example：UserPage, FollowersSidebar, StoryContainer, FollowedUserList

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题