React 基础巩固(十七)——组件化开发（一）

组件化开发

• 什么是组件化开发？
  • 分而治之的思想
  • 将一个页面拆分成一个个小的功能块
  • 将应用抽象成一颗组件树
• React的组件相对于Vue更加的灵活和多样
  • 按照不同的方式可以分为很多类组件
    • 根据组件的定义方式，分为：函数组件、类组件
    • 根据组件内部是否有状态需要维护，分为：无状态组件、有状态组件
    • 根据组件的不同职责，分为：展示型组件、容器型组件
  • 函数组件、无状态组件、展示组件主要关注UI的展示
  • 类组件、有状态组件、容器组件主要关注数据逻辑

类组件

• 定义
  • 组件名称是大写字符开头
  • 类组件需继承自 React.Component
  • 类组件必须实现render函数
• 使用class定义一个组件
  • constructor是可选的，通常在constructor中初始化一些数据
  • this.state中维护的就是我们组件内部的数据
  • render()方法是class组件中唯一必须实现的方法

javascript">import React from "react";

// 1.类组件
class App extends React.Component {
  constructor() {
    super()

    this.state = {
      message: 'hello react'
    }
  }

  render() {
    const { message } = this.state

    return <div>{ message }</div>;
  }
}

export default App;

• render函数的返回值
  • 当render被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
    • React元素（通常通过JSX创建，例如<div/>会被React渲染为DOM节点，<MyComponent/>会被React渲染为自定义组件）
    • 数组或fragments（使得render方法可以返回多个元素）
    • Portals（可以渲染子节点到不同的DOM子树中）
    • 字符串或数字类型（在DOM中被渲染为文本节点）
    • 布尔类型或null（什么都不渲染）

函数组件

• 定义：函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容
• 特点：
  • 没有生命周期，也会被更新并挂载，但是没有生命周期函数
  • this关键字不能指向组件实例（因为没有组件实例）
  • 没有内部状态（state）

javascript">// 函数式组件
function App() {
  // 返回值：和类组件中render函数返回的一致
  return <div>hello react</div>;
}

export default App