乐闻世界logo
搜索文章和话题

React 函数组件和 class 组件之间的区别

浏览24
8月5日 12:43

React 函数组件和类组件是 React 中创建组件的两种不同方式。它们有几个主要区别:

  1. 语法

    • 函数组件:使用 JavaScript 函数(或箭头函数)定义,它接收一个 props 参数并返回 JSX。函数组件通常更简洁。
      jsx
      function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
    • 类组件:使用 ES6 类来定义,它扩展自 React.Component,必须包含一个 render() 方法,该方法返回 JSX。
      jsx
      class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
  2. 状态管理

    • 函数组件:在 React 16.8 之前,函数组件不具备状态(state)和生命周期方法。但随着 React Hooks 的引入,函数组件可以使用 useState 和其他 Hooks 来管理状态和生命周期。
    • 类组件:具有内置的状态和生命周期方法。它们使用 this.statethis.setState 来管理组件的状态,以及一系列的生命周期函数(如 componentDidMountcomponentShouldUpdate 等)来执行副作用操作。
  3. 生命周期方法

    • 函数组件:通过使用 React Hooks(如 useEffect),函数组件可以执行与类组件生命周期方法相似的操作,但它们不直接拥有生命周期方法。
    • 类组件:具有完整的生命周期方法,可以在组件的不同阶段执行代码。
  4. this 关键字

    • 函数组件:不使用 this 关键字。所有的数据(包括 props 和 state)都通过函数参数或 Hooks 访问。
    • 类组件:需要使用 this 关键字来访问 props、state 和类方法。
  5. 优化性能

    • 函数组件:因为它们没有类实例,理论上可以更轻量。并且可以通过使用 React.memo 进行性能优化。
    • 类组件:可以使用 shouldComponentUpdatePureComponent 来优化性能,但这些通常比函数组件中的优化方法更复杂。
  6. 钩子(Hooks)

    • 函数组件:可以使用 Hooks,如 useStateuseEffect 等,使得在不使用类的情况下也能拥有类似的功能。
    • 类组件:无法使用 Hooks,必须依靠类本身的特性和生命周期。
  7. 部署和维护

    • 函数组件:通常来说,由于它们更加简洁,函数组件更容易编写和维护。它们也更容易分割成更小的函数。
    • 类组件:可能会更加冗长,特别是当涉及到多个生命周期方法和状态管理时,这可能使得维护和重构变得更加困难。
  8. 代码复用

    • 函数组件:可以通过自定义 Hooks 实现逻辑的复用。
    • 类组件:通常通过高阶组件(HOCs)或渲染道具(Render Props)来实现逻辑的复用。
标签:React前端