Chat
Ask me anything
Ithy Logo
Sign in to save

React 组件编写指南

React JS Components API & Components Life Cycle

概述

在 React 中，组件是构建用户界面的基本单元。通过组件化的方式，可以将复杂的 UI 拆分为独立、可复用的部分，从而提高开发效率和代码可维护性。本文将全面介绍如何编写 React 组件，包括函数组件、类组件、使用 Hooks 进行状态管理等内容。

创建 React 组件的基本步骤

创建一个 React 组件通常包括以下几个步骤：

  1. 新建组件文件夹和文件

    在项目的 src/components 目录下创建一个新的文件夹和组件文件。例如，创建一个名为 Todo 的组件：

    mkdir src/components
touch src/components/Todo.js

  2. 导入 React

    在 Todo.js 文件的顶部导入 React：

    import React from "react";

  3. 定义组件

    使用函数定义并导出组件：

    export default function Todo() {
  return (
    // 组件的 JSX 内容
  );
}

  4. 返回 JSX 内容

    在组件中返回 JSX 内容，例如：

    export default function Todo() {
  return (
    <li className="todo stack-small">
      <div className="c-cb">
        <input id="todo-0" type="checkbox" defaultChecked={true} />
        <label className="todo-label" htmlFor="todo-0">Eat</label>
      </div>
      <div className="btn-group">
        <button type="button" className="btn">Edit <span className="visually-hidden">Eat</span></button>
        <button type="button" className="btn btn__danger">Delete <span className="visually-hidden">Eat</span></button>
      </div>
    </li>
  );
}

  5. 在 App.js 中使用组件

    在 App.js 中导入并使用 Todo 组件：

    import React from 'react';
import Todo from './components/Todo';

function App() {
  return (
    
    
      
    
    
  );
}

export default App;

函数组件与类组件

React 组件主要有两种类型：函数组件和类组件。随着 React 的发展，函数组件结合 Hooks 已成为主流，因其更简洁和易于维护。

函数组件 (Functional Component)

这是最简单和常用的组件形式，适合于展示性组件，没有复杂的逻辑。

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

该组件接收一个 props 对象，包含一个 name 属性，渲染一个问候语。

使用 Hooks 的函数组件

为了处理状态和副作用，React 引入了 Hooks，允许函数组件拥有状态和其他 React 特性。以下是使用 useState Hook 的例子：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

这个组件展示了如何使用 useState 来跟踪点击次数。

类组件 (Class Component)

虽然现在较少使用，但类组件在处理复杂的生命周期逻辑时仍然有效。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
      </div>
    );
  }
}

与函数组件相比，类组件使用 this.props 来访问属性，并且可以定义生命周期方法。

Hooks 简介

Hooks 是 React 16.8 引入的新特性，允许在不编写类的情况下使用状态以及其他 React 的特性。常用的 Hooks 包括：

useState

用于在函数组件中添加状态。

const [state, setState] = useState(initialState);

useEffect

用于处理副作用，如数据获取、订阅等。

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑
  };
}, [dependencies]);

useContext

用于在组件之间共享数据，无需通过 props 层层传递。

组件的最佳实践

编写高质量的 React 组件不仅仅是让组件正常工作，还包括以下几个方面：

组件命名

组件名称应以大写字母开头，使用有意义的名称以便于理解其功能。

单一职责原则

每个组件应专注于完成一个特定的任务，避免过于庞大和复杂。

可复用性

通过传递 props，使组件能够在不同的场景下复用。

组合组件

通过组合小组件来构建复杂的 UI，而不是在一个组件中处理所有逻辑。

示例：创建一个 Todo 应用组件

下面是一个完整的示例，展示如何创建一个简单的 Todo 项目组件：

Todo.js

import React from "react";

export default function Todo() {
  return (
    <li className="todo stack-small">
      <div className="c-cb">
        <input id="todo-0" type="checkbox" defaultChecked={true} />
        <label className="todo-label" htmlFor="todo-0">吃饭</label>
      </div>
      <div className="btn-group">
        <button type="button" className="btn">编辑 <span className="visually-hidden">吃饭</span></button>
        <button type="button" className="btn btn__danger">删除 <span className="visually-hidden">吃饭</span></button>
      </div>
    </li>
  );
}

App.js

import React from 'react';
import Todo from './components/Todo';

function App() {
  return (
    <div>
      <Todo />
    </div>
  );
}

export default App;

管理组件状态

在 React 中，状态是用于存储组件动态数据的对象。通过状态管理，可以实现组件的交互性和动态更新。

使用 useState Hook

下面的示例展示了如何在函数组件中使用 useState 来管理计数器的状态：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>计数器：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        点击增加
      </button>
    </div>
  );
}

export default Counter;

使用 useEffect Hook

useEffect 可以用来处理副作用，如数据获取、订阅等。例如，以下示例在组件挂载时获取数据：

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  if (!data) {
    return <p>加载中...</p>;
  }

  return (
    <div>
      <h1>数据加载完成</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher;

组件生命周期

组件的生命周期指的是组件从创建到销毁的过程。在类组件中，可以通过生命周期方法来控制这一过程。而在函数组件中，可以使用 useEffect 来模拟生命周期方法。

类组件中的生命周期方法

  • componentDidMount: 组件挂载后调用，适合进行数据获取等操作。
  • componentDidUpdate: 组件更新后调用，可以根据变化进行相应处理。
  • componentWillUnmount: 组件卸载前调用，用于清理资源，如取消订阅。

函数组件中的 useEffect

使用 useEffect 可以在函数组件中处理副作用，并模拟生命周期方法：

useEffect(() => {
  // 类似 componentDidMount 和 componentDidUpdate 的逻辑
  return () => {
    // 类似 componentWillUnmount 的清理逻辑
  };
}, [dependencies]);

组合与复用组件

为了构建复杂的用户界面，通常需要将多个小组件组合在一起。同时，通过组件的复用，可以减少代码重复，提高开发效率。

组件嵌套

一个组件可以在其 JSX 中嵌套其他组件。例如：

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

属性传递 (Props)

通过 props，可以将数据从父组件传递到子组件，实现组件之间的通信。例如：

function Welcome(props) {
  return <h1>你好, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="张三" />
      <Welcome name="李四" />
    </div>
  );
}

使用 Context 共享数据

当需要在多个组件之间共享数据时，可以使用 React 的 Context API，避免通过层层传递 props。例如：

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按钮</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

样式与 CSS 处理

为 React 组件添加样式有多种方法，包括使用外部 CSS 文件、CSS 模块、内联样式以及 CSS-in-JS 库（如 styled-components）。以下是几种常见的方法：

外部 CSS 文件

在组件文件中导入外部 CSS 文件：

import './MyComponent.css';

function MyComponent() {
  return <div className="container">内容</div>;
}

内联样式

直接在 JSX 中使用内联样式，但不推荐用于大型项目：

function MyComponent() {
  return <div style={{ color: 'blue', fontSize: '14px' }}>内容</div>;
}

CSS 模块

通过 CSS 模块可以实现样式的局部作用域，避免样式冲突：

import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.container}>内容</div>;
}

高级主题

性能优化

为了提高 React 应用的性能，可以采取以下措施：

  • 避免不必要的重新渲染：使用 React.memo 包裹组件，或在类组件中使用 shouldComponentUpdate。
  • 代码分割：使用 React.lazy 和 Suspense 进行按需加载。
  • 使用键值（Keys）：在列表渲染中，为每个元素提供唯一的键值，帮助 React 更高效地更新和渲染。

错误边界

错误边界是 React 组件，用于捕获其子组件树中的 JavaScript 错误，记录错误，并显示备用 UI。

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可以将错误记录到错误报告服务
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>出现错误。</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

自定义 Hooks

通过自定义 Hooks，可以提取和复用组件逻辑。例如：

// useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

export default useFetch;

在组件中使用自定义 Hook：

import React from 'react';
import useFetch from './useFetch';

function DataDisplay() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) {
    return <p>加载中...</p>;
  }

  return <div>{JSON.stringify(data)}</div>;
}

export default DataDisplay;

常见问题解答

函数组件和类组件，哪个更好？

目前，函数组件结合 Hooks 是 React 的主流写法，因其更简洁、易于理解和测试。类组件在处理复杂的生命周期逻辑时仍然有其应用场景，但推荐使用函数组件作为首选。

如何在组件之间共享状态？

可以通过以下几种方式共享状态：

  • 提升状态（Lifting State Up）：将共享状态提升到最近的共同父组件。
  • 使用 Context API：在组件树中共享数据，无需通过层层传递 props。
  • 使用状态管理库：如 Redux、MobX 等，适用于大型应用。

如何进行组件的性能优化？

性能优化可以通过以下方法实现：

  • 避免不必要的重新渲染：使用 React.memo 或 shouldComponentUpdate。
  • 使用代码分割：按需加载组件，减少初始加载时间。
  • 优化列表渲染：为列表项提供唯一键值，减少 DOM 更新。
  • 使用虚拟化技术：如 react-window，提高大量数据列表的渲染性能。

参考资料

reactjs.org
React 官方文档
developer.mozilla.org
MDN - 函数简介
lihui.net
React 组件示例
hulufei.gitbooks.io
React 入门教程

Last updated January 3, 2025

AI-assisted research. Sources, methodology and corrections · Source-checked guides and tools · Explore published answers

Ask Ithy AI
Download Article
Delete Article
|Help|Privacy|Terms