类组件（状态组件）

使用class定义一个组件：

  • constructor是可选的，通常在constructor中初始化一些数据；
  • this.state中维护的就是我们组件内部的数据；
  • render() 方法是 class 组件中唯一必须实现的方法；

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

  • 类组件需要继承自 React.Component / PureComponent
  • 组件名必须以大写字母开头，而标签名不能大写
  • 类组件必须实现render函数


  1. import React, { Component/PureComponent } from 'react';
  3. export default class App extends Component {
  4.   constructor() {
  5.     super();
  6.     this.state = {...}
  7.   }
  8.   render() {
  9.     return <h2>Hello App</h2>
  10.   }
  11. }

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

  • React 元素：
    • 如：<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件；
  • 数组或 fragments：使得 render 方法可以返回多个元素。
  • Portals：可以渲染子节点到不同的 DOM 子树中。
  • 字符串或数值类型：它们在 DOM 中会被渲染为文本节点
  • 布尔类型或 null：什么都不渲染。


函数组件(无状态组件)

使用function来进行定义的函数，其会返回和类组件中render函数返回一样的内容。
函数式组专注于 render，整体渲染性能得到了提升，且视图和数据解耦分离，输出只取决于输入。

函数组件的特点：

  • 没有生命周期(函数)，但是也会被更新并挂载；
  • 没有this(组件实例；
  • 没有内部状态（state），只能通过 props 获取属性内容并实现组件的更新
  • 组件不需要被实例化

定义一个函数组件：

  1. export default function App() {
  2.   return (
  3.     <div>Hello World</div>
  4.   )
  5. }

memo
Protals