当前位置：首页 > React

组件如何使用react

2026-02-26 11:09:02React

使用 React 组件的基本方法

React 组件是构建用户界面的独立模块，分为函数组件和类组件两种形式。以下是具体使用方法：

函数组件 函数组件是最简单的形式，接收 props 并返回 React 元素：

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

类组件 类组件通过继承 React.Component 实现，具有生命周期方法：

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

组件组合与嵌套

组件可以相互嵌套使用，形成树状结构：

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

Props 的使用

Props 是组件的输入参数，不可变：

function Greeting(props) {
  return <p>{props.message}</p>;
}
// 使用时
<Greeting message="Welcome back!" />

State 管理

类组件使用 this.state 管理内部状态：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <div>{this.state.count}</div>;
  }
}

函数组件使用 useState Hook：

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

生命周期方法（类组件）

重要生命周期方法示例：

class Example extends React.Component {
  componentDidMount() {
    // 组件挂载后执行
  }
  componentDidUpdate() {
    // 组件更新后执行
  }
  componentWillUnmount() {
    // 组件卸载前执行
  }
}

事件处理

处理用户交互事件：

function Button() {
  function handleClick() {
    console.log('Clicked');
  }
  return <button onClick={handleClick}>Click</button>;
}

条件渲染

根据条件显示不同内容：

function Greeting(props) {
  if (props.isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

列表渲染

使用 map() 渲染列表：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) => (
        <li key={number.toString()}>{number}</li>
      ))}
    </ul>
  );
}

组件间通信

父组件通过 props 传递数据给子组件：

function Parent() {
  const data = "Hello";
  return <Child message={data} />;
}
function Child(props) {
  return <p>{props.message}</p>;
}

子组件通过回调函数与父组件通信：

组件如何使用react

function Parent() {
  function handleChildClick(data) {
    console.log(data);
  }
  return <Child onClick={handleChildClick} />;
}
function Child(props) {
  return <button onClick={() => props.onClick('Data')}>Click</button>;
}