我正在参加「掘金·启航计划」
组件化是一种分而治之的思想：
如果我们将一个页面中所有的处理逻辑全部 放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
但如果我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护 就变得非常容易了。
我们需要通过组件化的思想来思考整个应用程序：
- 我们将一个完整的页面分成很多个组件；
- 每个组件都用于实现页面的一个功能块；
- 而每一个组件又可以进行细分；
- 而组件本身又可以在多个地方进行复用；
一、React的组件化
组件化思想的应用：
- 有了组件化的思想，我们在之后的开发中就要充分的利用它。
- 尽可能的将页面拆分成一个个小的、可复用的组件。
- 这样让我们的代码更加方便组织和管理，并且扩展性也更强。
React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：
根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；
根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；
这些概念有很多重叠，但是他们最主要是关注数据逻辑和UI展示的分离：
- 函数组件、无状态组件、展示型组件主要关注UI的展示；
- 类组件、有状态组件、容器型组件主要关注数据逻辑；
二、类组件
定义类组件
类组件的定义有如下要求：
- 组件的名称是大写字符开头（无论类组件还是函数组件）
- 类组件需要继承自 React.Component
- 类组件必须实现render函数
使用class定义一个组件：
- constructor是可选的，我们通常在constructor中初始化一些数据， this.state中维护的就是我们组件内部的数据；
- render() 方法是 class 组件中唯一必须实现的方法
import React from 'react'
class App extends React.Component {
constructor() {
super()
this.state = {
message: 'hi'
}
}
render() {
const {message} = this.state
return (
<div>{message}</div>
)
}
}
export default App
render函数的返回值
当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
1. React 元素：
通常通过 JSX 创建
- 例如<div>会被 React 渲染为 DOM 节点， <MyComponent />会被 React 渲染为自定义组件；
- 无论是 <div>还是 <MyComponent /> 均为 React 元素。
render() {
const {message} = this.state
return (
<div>{message}</div>
)
}
2. 数组或 fragments
使得render可以返回多个元素
- 此时React会遍历这些元素，一个个渲染在页面上
render() {
return ['a', 'b', 'c']
}
render() {
return [
<h1>a</h1>,
<h1>b</h1>,
<h1>c</h1>
]
}
3. Portals：可以渲染子节点到不同的DOM子树
4. 字符串或数值类型：它们在 DOM 中会被渲染为文本节点
5. 布尔类型或 null：什么都不渲染
三、函数组件
定义函数组件
函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容：
export default function App() {
return (
<h2>hi</h2>
)
}
函数组件特点
函数组件有自己的特点（hooks除外）：
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
- this关键字不能指向组件实例（因为没有组件实例）；
- 没有内部状态（state）；
早期的函数组件只是为了展示内容，有了hooks之后函数组件就变得不一样了
