Skip to content

容器组件还是展示组件? #11

@clumsyme

Description

@clumsyme

写React App时,用Dan Abramov介绍的模式将组件分为容器组件展示组件确实更利于理解app逻辑,但是有时候写组建的时候难免会纠结一个组件是写作容器组件还是写作展示组件。

写作容器组件的话,可能这个组件只是一个容器组件的子组件,从父组件直接获取props可能更简单,而如果该组件写作容器组件,该组件的子元素同样面临这个问题,一级一级往下究竟到哪一步可以写作展示组件呢?;

写作展示组件的话(通常推荐用函数构建,所以没有周期函数,没有内部状态),组件自身也可能有状态,也有可能有各种回调,可能会改变父组件状态,也有可能发送http请求等。

结合一直以来的经验,总结几点选择依据:

  1. 如果组件只接收数据用于展示,选择展示组件。
  2. 如果组件需要多次使用,选择展示组件。
  3. 如果组件只用到一次(视为模块),写作容器组件。
  4. 如果子组件只是涉及自身状态或父组件状态更改,选择展示组件。
  5. 如果父组件状态多而复杂,则子组件按不同功能写作不同容器组件。

以上只是一些参考依据,实际中可能不完全对。而且应该要明白:编程模式是用来方便我们编写程序的,而不是束缚手脚让我们的代码来适应模式的。容器组件和展示组件都可能有容器子组件和展示子组件,它们的界限也不是那么明确,所以不一定要在一开始就确定好一个组件是哪种类型;如果一开始分不出用哪种类型,大可暂时不管这个问题。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions