当前位置: 首页 > 面试题库 >

展示组件和容器组件有什么区别?

乐正锦
2023-03-14
本文向大家介绍展示组件和容器组件有什么区别?相关面试题,主要包含被问及展示组件和容器组件有什么区别?时的应答技巧和注意事项,需要的朋友参考一下

展示组件(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

 类似资料:
  • 问题描述 UI和业务逻辑和数据混杂在一起. class Clock extends React.Component { constructor(props) { super(props); this.state = {time: this.props.time}; this._update = this._updateTime.bind(this); } ren

  • 本文向大家介绍组件和插件有什么区别?相关面试题,主要包含被问及组件和插件有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue。 插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue 本身。

  • 本文向大家介绍受控组件和非受控组件有什么区别?相关面试题,主要包含被问及受控组件和非受控组件有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom

  • 我刚刚开始使用Angular 2。 我想知道Angular 2中的组件和指令有什么区别?

  • 本文向大家介绍在React中组件和元素有什么区别?相关面试题,主要包含被问及在React中组件和元素有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 组件首字母大写 组件是由元素构成的。元素数据结构是普通对象,而组件数据结构是类或纯函数

  • 问题内容: 我是redux反应开发的初学者。我想知道什么是演示组件和容器组件。 如何将组件分类为Presentational或Container? 两者有什么区别? 这样对组件进行分类有什么好处? 问题答案: 您会发现您的组件更容易重用,并考虑将它们分为两类。我称它们为容器和演示组件。 我假设您已经了解Redux架构 容器组件 意识到redux 订阅Redux状态 派遣到redux动作 由reac