react redux中组件和容器的区别

IT技术 javascript reactjs redux
2021-04-28 23:36:07

react redux中的组件和容器有什么区别?

4个回答

Component是 React API 的一部分。组件是描述 React UI 一部分的类或函数。

Container是 React 组件的非正式术语,它被connect-ed 到 redux 存储。容器接收 Redux 状态更新和dispatch动作,它们通常不渲染 DOM 元素;它们将渲染委托给展示性子组件。

有关更多详细信息,请阅读Dan Abramov 的Presental 与容器组件

组件

组件让您可以将 UI 拆分为独立的、可重用的部分,并单独考虑每个部分。它们有时被称为“展示组件”,主要关注的是事物的外观

容器

容器就像没有 UI 的组件一样,容器关注事物的工作方式。. 它主要与 redux store 对话以获取和更新数据

请参阅 Redux 文档中的表格比较

在此处输入图片说明

详解https://redux.js.org/basics/usage-with-react#presentational-and-container-components

负责获取数据和显示的组件称为智能或容器组件。数据可以来自 redux、任何网络调用或第三方订阅。

哑/展示组件是那些负责根据收到的props展示视图的组件。

好文章,这里有例子

https://www.cronj.com/blog/difference-container-component-react-js/

React 有两个主要组件,第一个是智能组件(容器),第二个是哑组件(表示组件)。容器与组件非常相似,唯一的区别是容器了解应用程序状态。如果您的网页的一部分仅用于显示数据(哑巴),则将其设为组件。如果您需要它智能并了解应用程序中的状态(每当数据更改时),则将其设为容器。