Redux 展示组件与容器组件 [英] Redux Presentational Components Vs Container Component

问题描述

我是使用 redux 进行 React 开发的初学者.我想知道什么是展示组件和容器组件.

• 如何将组件归类为 Presentational 或 Container ?
• 这两者有什么区别?
• 以这种方式对组件进行分类有什么好处?

解决方案

如果将组件分为两类，您会发现组件更易于重用和推理.我称它们为容器和展示组件.

我假设你了解 redux 架构

容器组件

• 了解 redux
• 订阅 redux 状态
• 调度到 redux 操作
• 由 react-redux 生成
• 专注于事情的运作方式

展示组件

• 不知道 redux
• 从 props 读取数据
• 在 props 上调用回调
• 由开发者编写
• 关注事物的外观

对组件进行分类的好处

• 可重用性
• 关注点分离

有关详细信息，请阅读这篇文章>

I'm beginner of react development with redux. I'm wondering what are the Presentational Components and Container Components.

• How to categorized components as Presentational or Container ?
• What are the difference between these two ?
• What are the benefit of categorizing components this way ?

解决方案

You’ll find your components much easier to reuse and reason about if you divide them into two categories. I call them Container and Presentational components.

I assume you have knowledge about redux architecture

Container Components

• Aware of redux
• Subscribe redux state
• Dispatch to redux actions
• Generated by react-redux
• Focus on how things work

Presentational Componets

• Unaware of redux
• Read data from props
• Invoke callbacks on props
• Written by developer
• Focus on how thing look

Benefits of categorizing components

• Reusability
• Separation of concerns

For more details read this article

这篇关于Redux 展示组件与容器组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！