［译］Smart and Dumb Components

mist14 发布于2019-08-19 17:11 / 451人阅读

摘要：我把这两大类称作和，但是我也听说他们被称为和和和等。虽然叫法不同，但核心思想都差不多它必须能独立运作。。不能依赖依赖这个的或者部分可以允许有这样的话有助于这个组件有修改弹性接受数据和数据的改变只能通过來处理不必也不能用。

Smart and Dumb Components

原文地址

当我在写React应用的时候我发现一种老有用而且简单的写法了。要是你写了一段时间React的话。。我估摸着你也应该发现了这种写法了。这篇文章（下次我就翻译这片文章）就说的很好，但是捏，我还想多差两句嘴

你要是把你的组件分成两大类。。你将会发现，这样的话你更容易思考你的组件该怎么写。。而你的组件写出来也更容易复用。我把这两大类称作 Smart和 Dumb，但是我也听说他们被称为Fat 和 Skinny, Stateful 和 Pure, Screens 和 Components等。虽然叫法不同，但核心思想都差不多

Dumb components:

-它必须能独立运作。。不能依赖依赖这个app的actions 或者 stores 部分

可以允许有this.props.children,这样的话有助于这个组件有修改弹性

接受数据和数据的改变只能通过props來处理,不必也不能用state。

组件的外观能用一个css來维护(这样才更容易重用，类似支付宝的ant)

很少用到state,(一般呈现动画的时候可能会用到。。比如控制下拉框的展开或者收起)

也许会用到其他的dumb components

比如说: Page, Sidebar, Story, UserInfo, List,像这些都是dumb components.

smart components:

一定包含至少一个Smart 或者 Dumb的元件，（这肯定啊。。不然他干的啥）

负责把从flux(or redux等)接收到的state传给dumb component

负责call action,并把它的callback传給dumb component

它应该只有结构没有外观（这样的话。。改个样式只需要改dumb 组件就好了。。他写着。。他写那里不然很累啊）

比如说: UserPage, FollowersSidebar, StoryContainer,
FollowedUserList.

这样做的好处

有助理你分离关注点，这样的话更有助于理解你的app的业务逻辑和它的ui

更有助于复用你的dumb组件，你可以将你的dumb组件复用于别的state下，而且这两个state还完全不同

本质上dumb 组件其实就是你的app的调色版。。你可以将它们放到一个页面上。。然后让设计师除了app的业务逻辑，样式随便怎么改，

GPU云服务器云服务器 Dumb Components styled-components web-components

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78269.html

[译]看这些文章，足够你学好redux

摘要：原文地址我想分享一些文章，来帮你学习的概念和架构在开始之前我们先来看这两篇文章，用代替和然后我们通过一个代码教程我翻译地址深入了解，然后看一看超级介绍完成你对的探索之旅现在是时候去学习和再往前走理解并且看一看关于的一切注尽量中文地址的我用的原文地址我想分享一些文章，来帮你学习redux的概念和架构在开始redux之前我们先来看这两篇文章，用High Order Component...

fengxiuping 2019-08-19 17:17 评论0 收藏0
(翻译)Presentational and Container Components

摘要：对于很多中间组件来说，他们并不需要这些，但是他们还必须传递给下一级组件。更倾向于，而更倾向于，当然这并不是绝对的。这是篇文章翻译自的这是篇文章翻译自medium的：Presentational and Container Components 译者语：这篇文章是紧接着对我上一篇翻译的扩充，对Container Component模式描述的更加细，解决了我很多开发中的困惑。 Prese...

mushang 2019-08-22 11:02 评论0 收藏0
看redux的一些笔记

摘要：不只为组件提供中的数据及扩展方法，它还为定义的组件添加了一系列事件操作，这些事件的核心点就是，然后可以在自己定义的组件内获得。行为功能是对目的功能和有用行为的一种抽象。下一个中间件函数通常由名为的变量来表示。 redux 这个是好久之前写的，一直忘记粘过来，里面有一些是写作格式是我自己定义的，所以和segmentfault的markdown语法有出入，图片也不能加载，所以原文效果可以在...

el09xccxy 2019-08-21 11:39 评论0 收藏0
[译] Python 学习 —— __init__() 方法 4

摘要：同时，有多个类级别的静态构造函数的方法。这个累赘，无论如何，是被传递到每个单独的对象构造函数表达式中。我们可能只有几个特定的担忧，提供额外关键字参数给构造函数。注：原书作者 Steven F. Lott，原书名为 Mastering Object-oriented Python 没有__init__()的无状态对象下面这个示例，是一个简化去掉了__init__()的类。这是一个常见...

yvonne 2019-07-31 11:38 评论0 收藏0
面试官：了解Fuzzing Test吗？

摘要：产生的崩溃测试用例可能难以分析，因为模糊测试的行为并不能告诉你关于软件内部运行方式的知识。模糊测试向软件系统提供随机输入。软件质量保障专注测试圈，自动化测试、测试平台开发、测试新技术、大厂测试岗面经分享，可以帮忙内推BATJ等大厂！欢迎加VX沟通交流: ISTE1024 测试同...

shusen 2021-11-15 11:37 评论0 收藏0