1.分而治之的思想

人面对复杂问题的处理方式：

  • 任何一个人处理信息的逻辑能力都是有限的
  • 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容
  • 如果将一个复杂的问题拆分成一个个可以处理的小问题，再放其整体当中，你会发现大问题也会迎刃而解

上面的思想就是分而治之的思想：

  • 分而治之是软件工程的重要思想，是复杂系统开发和维护的基石
  • 而前端目前的模块化和组件化都是基于分而治之的思想

2.什么是组件化开发

组件化也是类似的思想：

  • 如果把一个页面中的所有处理逻辑都放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展
  • 但如果,我们将页面拆分成一个个小的功能块,每个功能块完成属于自己这部分的独立功能，那么整个页面的管理和维护就变得非常容易了

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

  • 我们将一个完整的页面拆分成很多个组件
  • 每个组件都用于实现页面的一个功能块
  • 而每一个组件又可以进行细分
  • 组件本身有可以在多个地方进行复用

3.React的组件化

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

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

React组件化开发（6）- react的组件化（1）

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

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

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

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

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

3.1类组件和函数组件
1.类组件的定义要求：

  • 组件名首字母必须大写（类组件和函数组件是一样的）

    • 因为如果是小写字母，它会被认为是原生DOM元素
  • 类组件必须继承自React.Component
  • 类组件必须实现render函数

使用class定义一个组件

  • constructor是可选的，我们通常在constructor中初始化一些数据
  • this.state中维护的是我们类组件内部的数据
  • render() 是类组件中唯一必须实现的方法：
export default class App extends Component {
  render() {
    return (
      <div>
        <h2>权某人</h2>
      </div>
    )
  }
}
2.函数组件

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

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

  • 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
  • 没有this(组件实例）
  • 没有内部状态（state）
export default function App() {
  return (
    <div>
      <h2>函数组件</h2>
    </div>
  )
}
3.2render函数的返回值

当render函数被调用时，它会检查this.props和this.state的变化并返回一下类型之一：

1.react元素
  • 通常通过JSX创建
  • 例如：<div/>会被React渲染为DOM节点，<MyComponent//>会被渲染为自定义组件
  • 无论是上面哪一种均为React元素
2.数组或者fragments
  • 使得render函数可以返回多个元素
3.Portals
  • 可以渲染子节点到不同的DOM树中。
4.字符串或者数值类型
  • 它们在DOM中会被渲染为文本节点
5.布尔类型或null
  • 什么都不渲染
文章目录