(三)React组件化

组件化

为什么需要组件化开发

在日常开发中，系统往往是不是一个简单HelloWorld组件，它一个庞大的模块，而若是把整个系统模块的内容在一个页面中编写，实现的话就会导致页面的逻辑复杂，不易处理，不易扩展。而组件化开发则就是把系统划分为多个子模块，然后子模块在进行细分成更小的一个模块，每个模块都处理自己当前的逻辑与业务。最后一个个组件组装成一个组件树。

组件化开发的优势

快速开发，与传统开发一个项目不同，组件化开发的话我们可以借助已有的组件库，引入所需组件，加快开发效率。
代码复用，在组件化开发中，许多模块的代码往往会有许多重复的，而组件化开发则可以将代码进行抽象和封装。
又灵活，又易扩展，在组件化开发中，每个组件都是独立的，互不影响。这就意味着，我们可以快速、灵活地对单个组件进行修改和扩展。

React的组件化

组件化是React的核心思想，使用组件化可以让我们开发出一个个可复用的小组件。任何的应用最后都会被抽象成一颗组件树

React的组件

组件分类

根据组件的定义方式，可以分为：函数组件和类组件
根据组件内部是否有状态需要维护，可以分成：无状态组件和有状态组件
根据组件的不同职责，可以分成：展示型组件和容器型组件

组件分类

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

类组件

要求

组件名称必须大写(函数式组件名称也一致)
组件必须继承至React.Component
组件必须实现render函数

定义组件

组件中constructor方法是可选的, 不写的时候会自动添加, 通常选择是在组件中定义需要数据的时候
this.state中编写需要维护的数据 (就是state, 是不可修改的)
render()是类组件中必须实现的一个方法

js 复制代码

class HelloWorld extends React.Components{
    constructor(){
        super();
        this.state = {
            message: 'Hello World'
        }
    }

    render(){
        // 结构获取需要消息内容
        const {message} = this.state
        return <h2>{message}</h2>
    }
}

函数式组件

特点

没有生命周期，也会被更新并挂载，但是没有生命周期函数；
this关键字不能指向组件实例（因为没有组件实例）；
没有内部状态（state）

定义组件

js 复制代码

function HelloWorld(){
    return  <h2>Hello World</h2>
}