React 基础

React 基础知识：从核心概念到基础应用

1. React 的基本概念和框架

React 是一个用于构建用户界面的 JavaScript 库，主要用于创建单页应用（SPA）。React 的核心理念是组件化开发，通过将页面分解为多个可重用的组件，提高开发效率、可维护性和可扩展性。

2. 什么是组件？

组件是 React 应用的基本构建块。每个组件可以看作是一个独立、可重用的 UI 部件，可以是一个按钮、一个表单或是整个页面。组件可以嵌套、组合，从而构建出复杂的用户界面。

React 中的组件有两种常见类型：

• 函数组件（Functional Component）
• 类组件（Class Component）

3. JSX 语法基础

JSX 是 React 中的一种语法扩展，它允许你在 JavaScript 中编写 HTML 代码。虽然 JSX 看起来像 HTML，但它最终会被编译成纯 JavaScript。

3.1 JSX 语法规则：

• 在 JSX 中，所有元素都必须闭合。例如 <div></div> 或 <input />。
• JSX 允许你在表达式中插入 JavaScript 代码，通过使用 {}。
  jsx复制

  1
  2

  const name = "Alice";
  return <h1>Hello, {name}!</h1>;

3.2 JSX 示例：

function Welcome() {
  const user = "John";
  return <h1>Welcome, {user}!</h1>;
}

4. 函数组件 vs 类组件

4.1 函数组件（Functional Component）

函数组件是 React 最简洁的组件类型。它通过一个函数来定义组件，并且直接返回 JSX 代码。自从 React 16.8 推出了 Hooks，函数组件可以管理状态和副作用，越来越流行。

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

4.2 类组件（Class Component）

类组件通过 ES6 类来定义，必须继承 React.Component，并且需要包含 render 方法来返回 JSX。类组件在过去用于管理状态和生命周期方法，但随着 Hooks 的引入，现在大部分新项目推荐使用函数组件。

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

5. 状态（State）与属性（Props）

5.1 属性（Props）

• props 是组件的输入参数，代表从父组件传递给子组件的数据。
• Props 是只读的，不能在组件内部改变。
• 函数组件通过函数参数获取 props，类组件通过 this.props 访问。
  jsx复制

  1
  2
  3

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

5.2 状态（State）

• state 是组件内部的数据，它可以在组件内部改变。
• 类组件中的 state 通过 this.state 管理，而函数组件通过 useState Hook 来管理。
• 当组件的状态改变时，React 会自动重新渲染该组件。

类组件中的状态：

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

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

函数组件中的状态（使用 useState Hook）：

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

6. 事件处理

在 React 中，事件处理函数与 DOM 事件处理类似，但不同之处在于 React 使用驼峰命名法来命名事件属性（如 onClick 而不是 onclick），并且事件处理函数使用的是函数引用，而不是字符串。

6.1 事件处理示例：

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

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

在类组件中，可以使用 this 绑定事件处理函数：

class Button extends React.Component {
  handleClick() {
    alert('Button clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

6.2 传递参数给事件处理函数：

如果你想在事件处理函数中传递参数，可以使用箭头函数或 bind 方法：

function Button(props) {
  return <button onClick={() => props.onClick(props.id)}>Click me</button>;
}

7. 条件渲染

React 允许根据条件动态地渲染不同的内容。常用的条件渲染方法有：

• if 语句
• 三元运算符 (condition ? true : false)
• 逻辑运算符 (&&)

7.1 if 语句：

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}

7.2 三元运算符：

function Greeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>;
}

7.3 && 运算符：

当条件为 true 时，渲染后面的内容：

function Notification(props) {
  return (
    <div>
      {props.hasUnreadMessages && <p>You have unread messages.</p>}
    </div>
  );
}

总结：

通过学习 React 的基础知识，你可以理解组件化开发的核心思想，并掌握 JSX 语法、函数组件和类组件的区别、状态和属性的管理、事件处理以及条件渲染等核心概念。这些是 React 应用开发的基础，在深入学习前端开发时非常重要。