React学习教程，从入门到精通， React 组件语法知识点(9）

发布于：2025-09-05 ⋅ 阅读:(20) ⋅ 点赞:(0)

React 组件语法知识点

本文将详细介绍 React 组件的语法知识点，并提供一个包含详细注释的完整案例代码，帮助 React 初学者全面理解和掌握 React 组件的开发。

一、React 组件概述

React 是一个用于构建用户界面的 JavaScript 库。React 组件是构建 React 应用的基本单元。组件可以是有状态的（Class 组件）或无状态的（函数组件），并且可以组合使用以构建复杂的用户界面。

1.1 函数组件（Function Components）

函数组件是最简单的组件形式，使用 JavaScript 函数定义。它们接收 props 作为参数，并返回 React 元素。

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

1.2 类组件（Class Components）

类组件使用 ES6 类定义，可以拥有状态（state）和生命周期方法。

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

1.3 状态（State）和属性（Props）

  • Props：传递给组件的属性，用于组件间的数据传递。
  • State：组件内部的状态，用于管理组件内部的数据。

二、React 组件语法知识点详解

2.1 JSX 语法

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。

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

2.2 组件声明

函数组件
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
类组件
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2.3 Props

Props 是只读的，用于从父组件向子组件传递数据。

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

const element = <Welcome name="Sara" />;

2.4 State

State 是组件内部的状态，用于存储可变化的数据。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

2.5 生命周期方法

类组件具有生命周期方法，用于在组件的不同阶段执行操作。

  • 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 <div>Seconds: {this.state.seconds}</div>;
  }
}

2.6 事件处理

React 事件处理使用驼峰命名法，并传递函数作为事件处理器。

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

2.7 条件渲染

根据状态或 props 条件渲染不同的内容。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

2.8 列表渲染

使用 map 方法渲染列表。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);

function NumberList() {
  return <ul>{listItems}</ul>;
}

2.9 表单处理

React 中表单元素的状态由组件的 state 管理。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

2.10 组件组合与复用

通过组合组件实现复用。

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

三、React 组件案例代码

下面是一个完整的 React 应用示例，展示了一个简单的计数器组件。该组件包含状态管理、事件处理、生命周期方法以及条件渲染。

3.1 完整代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 1. 函数组件：显示欢迎信息
function Welcome(props) {
  return <h1>Welcome, {props.name}!</h1>;
}

// 2. 类组件：计数器
class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = {
      count: 0,
      showMessage: false,
    };
    // 绑定事件处理器
    this.increment = this.increment.bind(this);
    this.reset = this.reset.bind(this);
  }

  // 3. 生命周期方法：组件挂载后调用
  componentDidMount() {
    console.log('Counter component mounted.');
  }

  // 4. 生命周期方法：组件更新后调用
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log(`Count updated to ${this.state.count}.`);
      // 当计数变化时，显示消息
      this.setState({ showMessage: true });
    }
  }

  // 5. 事件处理器：增加计数
  increment() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  // 6. 事件处理器：重置计数
  reset() {
    this.setState({
      count: 0,
      showMessage: false,
    });
  }

  // 7. 渲染方法
  render() {
    return (
      <div className="counter-container">
        <Welcome name={this.props.name} />
        <div className="counter-display">
          <p>Count: {this.state.count}</p>
          <button onClick={this.increment}>Increment</button>
          <button onClick={this.reset}>Reset</button>
        </div>
        {this.state.showMessage && <p className="message">Count has been updated!</p>}
      </div>
    );
  }
}

// 8. 主应用组件
function App() {
  return (
    <div className="app">
      <Counter name="User" />
    </div>
  );
}

// 9. 渲染应用
ReactDOM.render(<App />, document.getElementById('root'));

3.2 代码详解

1. 导入模块
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
  • React：React 库。
  • ReactDOM：用于将 React 组件渲染到 DOM 中。
  • index.css：应用的样式文件。
2. 函数组件：Welcome
function Welcome(props) {
  return <h1>Welcome, {props.name}!</h1>;
}
  • 功能：显示欢迎信息。
  • Props：
    • name：接收父组件传递的用户名。
3. 类组件：Counter
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      showMessage: false,
    };
    this.increment = this.increment.bind(this);
    this.reset = this.reset.bind(this);
  }
  • 功能：实现一个简单的计数器。
  • 状态：
    • count：当前计数。
    • showMessage：是否显示消息。
  • 绑定事件处理器：
    • increment：增加计数。
    • reset：重置计数。
4. 生命周期方法：componentDidMount
componentDidMount() {
  console.log('Counter component mounted.');
}
  • 功能：组件挂载后调用，打印日志。
5. 生命周期方法：componentDidUpdate
componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    console.log(`Count updated to ${this.state.count}.`);
    this.setState({ showMessage: true });
  }
}
  • 功能：组件更新后调用，当计数变化时，打印日志并显示消息。
6. 事件处理器：increment
increment() {
  this.setState((prevState) => ({
    count: prevState.count + 1,
  }));
}
  • 功能：增加计数。
7. 事件处理器：reset
reset() {
  this.setState({
    count: 0,
    showMessage: false,
  });
}
  • 功能：重置计数和消息显示。
8. 渲染方法
render() {
  return (
    <div className="counter-container">
      <Welcome name={this.props.name} />
      <div className="counter-display">
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.reset}>Reset</button>
      </div>
      {this.state.showMessage && <p className="message">Count has been updated!</p>}
    </div>
  );
}
  • 功能：渲染组件内容，包括：
    • 显示欢迎信息。
    • 显示当前计数。
    • 显示增加和重置按钮。
    • 根据状态显示消息。
9. 主应用组件：App
function App() {
  return (
    <div className="app">
      <Counter name="User" />
    </div>
  );
}
  • 功能：组合 Counter 组件，并传递 name props。
10. 渲染应用
ReactDOM.render(<App />, document.getElementById('root'));
  • 功能：将 App 组件渲染到页面上的 root 元素中。

3.3 样式文件（index.css）

.app {
  text-align: center;
  margin-top: 50px;
}

.counter-container {
  border: 2px solid #4CAF50;
  padding: 20px;
  width: 300px;
  margin: 0 auto;
  border-radius: 10px;
}

.counter-display {
  margin: 20px 0;
}

button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

.message {
  color: #4CAF50;
  font-weight: bold;
}
  • 功能：应用的基本样式。

四、运行项目

  1. 安装依赖：

    确保已安装 Node.js 和 npm。然后在项目目录下运行：

    npm install

  2. 启动开发服务器：

    npm start

  3. 打开浏览器：

    访问 http://localhost:3000，即可看到计数器应用。

五、总结

本文详细介绍了 React 组件的语法知识点，并提供了一个完整的计数器组件案例代码。通过学习这些内容，React 初学者可以掌握函数组件、类组件、状态管理、事件处理、生命周期方法等核心概念，并能够编写基本的 React 应用。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布