码迷,mamicode.com
首页 > 其他好文 > 详细

React Native 第六天

时间:2018-04-08 16:03:47      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:reac   red   使用   生生   ide   div   sid   依赖   info   

Presentational and Container Components(译文)

译自(https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

当作者在编写React程序时,发现了一个简单却十分有用的模式。如果你已经使用react一段时间了,有可能你已经发现它了

这篇文章

很好的解释了它,这篇文章会补充一些观点。

 

如果你将组件分割到两个类别中你会发现你的组件很容易复用,作者把他们称作容器组件和展示组件,作者也听到过其他一些称呼

胖子和瘦子,聪明和愚蠢,稳固和纯净,屏幕和组件…,这些名称虽然不是一模一样,但是核心想法是相似的。

 

作者的展示组件

  • 关心事物展现的外观
  • 可能会包含展示组件和容器组件一起,通常它们各自拥有相同的DOM标签和样式
  • 通常允许通过this.props.children 进行控制
  • 对app其他部分没有依赖,比如flux action 或stores
  • 不指定数据如何加载或改变
  • 只通过props接收数据和回掉
  • 很少拥有自己的状态(当拥有时,应该是UI的状态而不是数据)
  • 除非组件需要状态,生命周期钩子,或者性能优化时可以用functional component编写
  • 举例 :Page, Sidebar, Story, UserInfo, List.

作者的容器组件

  • 关心事物如何运行
  • 可能同时包含展示组建和容器组件,但是通常没有任何DOM标签(除了一些最外层DIV标签),也不会有任何样式代码
  • 提供数据和行为给展示组件或者其他的容器组件
  • 调用FLUX action 并且提供这些作为回调给展示组件
  • 通常是有状态的,因为他们通常作为数据源
  • 一般使用高级组件生生,就像React Redux的connect(),elay的createContainer(),Flux Utils的Container.create(),而不是手写
  • 举例: UserPage, FollowersSidebar, StoryContainer, FollowedUserList

React Native 第六天

标签:reac   red   使用   生生   ide   div   sid   依赖   info   

原文地址:https://www.cnblogs.com/NerverLate/p/8744745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!