React 组件

最新推荐文章于 2024-11-11 18:31:00 发布

猪猪侠GG

最新推荐文章于 2024-11-11 18:31:00 发布

阅读量1.1k

点赞数 24

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_40595376/article/details/142719750

版权

React 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在 React 中，组件是构建用户界面的基本单位。每个组件可以看作是一个独立的模块，负责渲染部分界面并管理自己的逻辑。React 组件主要分为 函数组件 和 类组件 两种类型。以下是 React 组件的基础使用。

1. 函数组件

函数组件是最常用的 React 组件类型，它是一个 JavaScript 函数，返回要渲染的 JSX。它通常没有状态，但可以通过 Hooks 添加状态或其他功能。

示例：

function Greeting() {
  return <h1>Hello, world!</h1>;
}

export default Greeting;

Greeting 是一个函数组件，它返回一个 JSX 元素 <h1>。
在 React 中，函数名需要大写字母开头，否则 React 不会将其识别为组件。

使用组件：

你可以像使用 HTML 标签一样在 JSX 中使用组件：

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

2. 类组件

类组件是在 React 16.8 之前常用的一种组件形式，允许使用状态和生命周期方法。它是通过继承 React.Component 创建的。

示例：

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

export default Greeting;

类组件必须包含一个 render() 方法，返回要渲染的 JSX。
它还可以有状态和生命周期方法，适用于复杂的逻辑处理。

3. 组件的嵌套

一个 React 组件可以嵌套其他组件来构建更复杂的 UI。

示例：

function Greeting() {
  return <h1>Hello, world!</h1>;
}

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

export default App;

这里 App 组件包含了两个 Greeting 组件。
组件嵌套使得你可以将复杂界面拆分为多个小组件，便于开发和维护。

4. JSX

JSX 是 React 推荐的语法，它允许你在 JavaScript 中写 HTML 标签，看起来像模板语言，但实际上是 JavaScript 语法的扩展。

JSX 示例：

const element = <h1>Hello, world!</h1>;

JSX 是一种语法糖，React 会将它转换为 React.createElement() 调用。例如：

const element = React.createElement('h1', null, 'Hello, world!');

JSX 也支持表达式和属性：

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

在这个例子中，{name} 是一个 JavaScript 表达式，React 会将其结果渲染到页面上。

5. 组件的 props（属性）

组件可以通过 props 接收外部数据。props 是只读的，通常用来传递数据和配置。

示例：

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

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

Greeting 组件接收一个名为 name 的 prop，并在渲染时显示不同的名字。
在 JSX 中传递属性时，属性值可以是字符串、变量、表达式等。

6. 组件的 state（状态）

状态是由组件内部维护的数据，它是动态的、可变的，并且是组件自身管理的。

在函数组件中使用 useState Hook 来添加状态：

示例（函数组件中的状态）：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

useState(0) 创建了一个状态 count，初始值为 0。
setCount 是一个更新状态的函数，点击按钮时，状态 count 更新并重新渲染组件。

在类组件中，状态是通过 this.state 进行管理的，使用 setState 更新状态。

示例（类组件中的状态）：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

7. 事件处理

React 组件可以通过事件绑定来处理用户交互事件，例如点击、输入等。

示例：

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

使用 JSX 属性 onClick 绑定事件处理函数。
事件处理函数不需要添加 ()，否则会导致函数在渲染时立即执行，而不是在事件触发时执行。

8. 组件生命周期

在类组件中，组件有生命周期方法，你可以在这些方法中执行特定的操作，比如数据加载或清理工作。

常用的生命周期方法有：

componentDidMount：组件首次渲染完成后调用。
componentDidUpdate：组件更新后调用。
componentWillUnmount：组件销毁时调用。

示例：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <p>Seconds: {this.state.seconds}</p>;
  }
}

在函数组件中，可以使用 useEffect Hook 来模拟生命周期方法：

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);  // 清理工作
  }, []);

  return <p>Seconds: {seconds}</p>;
}

9. 组件之间的通信

父组件可以通过 props 向子组件传递数据。
子组件可以通过调用从父组件传递的回调函数来向父组件发送数据。

父组件传递数据给子组件：

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

function App() {
  return <Greeting name="Alice" />;
}

子组件向父组件发送数据：

function Child(props) {
  return <button onClick={() => props.onButtonClick('Hello from Child')}>Click me</button>;
}

function Parent() {
  function handleChildMessage(message) {
    alert(message);
  }

  return <Child onButtonClick={handleChildMessage} />;
}