4、React组件与生命周期方法实战指南

最新推荐文章于 2025-09-02 00:58:29 发布

omega

最新推荐文章于 2025-09-02 00:58:29 发布

阅读量36

点赞数

CC 4.0 BY-SA版权

分类专栏：精通React：从基础到实战文章标签： React 函数式组件无状态组件

本文链接：https://blog.youkuaiyun.com/omega/article/details/150373044

精通React：从基础到实战专栏收录该内容

20 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React组件与生命周期方法实战指南

一、函数式或无状态组件

1.1 为何使用函数式组件

在React开发中，我们之前主要学习了创建类组件。类组件在处理局部状态时非常有用，但在某些情况下，我们只需要渲染静态标记。这时，使用函数式组件（也称为无状态组件）可以提高应用程序的性能。例如，之前创建的一些布局组件（如Header、Content和Footer），通常是静态的，除非你想在头部添加切换菜单或用户信息，否则可以将它们转换为函数式组件。

1.2 转换Header组件为函数式组件

1.2.1 原始Header组件代码

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from '../../images/logo.svg';
class Header extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    url: PropTypes.string
  };
  render() {
    const {
      title = 'Welcome to React',
      url = 'http://localhost:3000'
    } = this.props;
    return (
      <header className="App-header">
        <