什么是组件化开发？

• 不把页面逻辑写在一个jsx文件中，根据页面结构和复用度将页面结构拆分成不同的组件，由组件组成页面。
• 组件化开发是一种分而治之的思想，页面拆分组件，组件管理自己内部逻辑。被多处使用。

如下图，将页面分为header,searchbar,list,list-item

react组件化

• 组件化是react的核心思想之一。react最主要的思想：组件化，声明式编程，跨平台。
• 任何一个应用都会被抽成组件树

以上关于组件化的描述，适合于所有框架。下边介绍react特有的概念。

1. 根据组件定义方式，分为：函数式组件（Function Component）和类组件（Class Component）
2. 根据组件内部是否维护对应状态，分为：无状态组件（stateless component）和有状态组件（stateful component），一般认为函数式组件无状态，类组件有状态
3. 根据组件的不同职责，分为：展示型组件和容器型组件

// 类组件
class App extens React.Component {
    constructor () {
        super()
        this.state={}
    }
}
// 函数式组件
fucntion App () {
    state = {}
}

这些概念是重叠的，但是他们最主要关注的是数据逻辑和UI展示的分离。

• 函数组件，无状态组件，展示型组件 主要关注UI展示
• 类组件，有状态组件，容器型组件 主要关注数据逻辑

后续还有组件的其他概念，比如一部组件、高阶组件等