编程课件-05_React组件化开发(一).pptx

React组件化开发（一）;;组件化是一种分而治之的思想：

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。

但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

我们需要通过组件化的思想来思考整个应用程序：

我们将一个完整的页面分成很多个组件；

每个组件都用于实现页面的一个功能块；

而每一个组件又可以进行细分；

而组件本身又可以在多个地方进行复用；

;组件化是React的核心思想，也是我们后续课程的重点，前面我们封装的App本身就是一个组件：

组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

任何的应用都会被抽象成一颗组件树。

;组件化思想的应用：

有了组件化的思想，我们在之后的开发中就要充分的利用它。

尽可能的将页面拆分成一个个小的、可复用的组件。

这样让我们的代码更加方便组织和管理，并且扩展性也更强。

React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：

根据组件的定义方式，可以分为：函数组件(FunctionalComponent)和类组件(ClassComponent)；

根据组件内部是否有状态需要维护，可以分成：无状态组件(StatelessComponent)和有状态组件(StatefulComponent)；

根据组件的不同职责，可以分成：展示型组件(PresentationalComponent)和容器型组件(ContainerComponent)；

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

函数组件、无状态组件、展示型组件主要关注UI的展示；

类组件、有状态组件、容器型组件主要关注数据逻辑；

当然还有很多组件的其他概念：比如异步组件、高阶组件等，我们后续再学习。

;类组件的定义有如下要求：

组件的名称是大写字符开头（无论类组件还是函数组件）

类组件需要继承自?React.Component

类组件必须实现render函数

在ES6之前，可以通过create-react-class?模块来定义类组件，但是目前官网建议我们使用ES6的class类定义。

使用class定义一个组件：

constructor??可选的，我们通常在constructor中初始化一些数据；

this.state中维护的就是我们组件内部的数据；

render()?方法是class组件中唯一必须实现的方法；

;当?render?被调用时，它会检查?ps?和?this.state?的变化并返回以下类型之一：

React元素：

通常通过JSX创建。

例如，div/?会被React渲染为DOM节点，MyComponent/?会被React渲染为自定义组件；

无论是?div/?还是?MyComponent/?均为React元素。

数组或fragments：使得render方法可以返回多个元素。

Portals：可以渲染子节点到不同的DOM子树中。

字符串或数值类型：它们在DOM中会被渲染为文本节点

布尔类型或?null：什么都不渲染。

;函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。

函数组件有自己的特点（当然，后面我们会讲hooks，就不一样了）：

没有生命周期，也会被更新并挂载，但是没有生命周期函数；

this关键字不能指向组件实例（因为没有组件实例）；

没有内部状态（state）；

我们来定义一个函数组件：

在前面的学习中，我们主要讲解类组件，后面学习Hooks时，会针对函数式组件进行更多的学习。

;很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期；

React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能；

生命周期和生命周期函数的关系：

生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；

比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；

比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；

比如卸载过程（Unmount），组件从DOM树中被移除的过程；

React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；

比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；

比如实现componentWillUnmount函数：组件即将被移除