【前端】【react】第一章：React 基础，组件数据管理，事件处理

本文链接：https://blog.youkuaiyun.com/qq_59344127/article/details/146767765

一、React 基础概念

React 是一个用于构建用户界面的 声明式（Declarative）、组件化（Component-Based） 和 高效（Efficient） 的前端库，核心概念包括 JSX、组件、状态管理和事件处理等。

二、React 核心知识点

（一）JSX（JavaScript XML）

1. JSX 是什么？

JSX 是 JavaScript 的一种语法扩展，用于在 JavaScript 代码中编写类似 HTML 的结构。

2. JSX 的本质

JSX 代码会被 Babel 转换为 React.createElement() 调用，最终生成 虚拟 DOM（Virtual DOM）。

3. JSX 语法规则

必须有唯一根节点：

return (
  <div>
    <h1>Hello React</h1>
  </div>
);

使用 {} 表达式插入变量：

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

必须闭合标签：
```
<input type="text" />  // 正确
```

（二）组件（Component）

1. 组件的概念

React 采用 组件化开发，UI 界面由一个个独立的组件构成，每个组件具有自己的逻辑和状态。

2. 组件的分类

函数组件（Function Component）：

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

类组件（Class Component）：

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

3. 组件的通信方式

父组件向子组件传递 props：

function Child(props) {
  return <h1>{props.message}</h1>;
}

function Parent() {
  return <Child message="Hello from Parent" />;
}

子组件向父组件传递事件：

function Child(props) {
  return <button onClick={() => props.onClick("Hello from Child")}>Click Me</button>;
}

function Parent() {
  const handleMessage = (msg) => alert(msg);
  return <Child onClick={handleMessage} />;
}

组件之间的共享状态（Context API、Redux）（详见后续章节）

（三）Props 和 State

1. `props`（属性）

用于父组件向子组件传递数据，不可修改（只读）。

组件通过 props 接收参数：

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

2. `state`（状态）

组件内部的可变数据，由组件自身维护。

useState 在函数组件中定义状态：

function Counter() {
  const [count, setCount] = React.useState(0);
  
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

在类组件中，使用 this.state：

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

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Count: {this.state.count}
      </button>
    );
  }
}

3. `props` vs `state`

比较项	`props`	`state`
定义位置	由父组件传递	组件内部定义
是否可变	不可变	可变
作用	传递数据	维护组件内部状态
可否被子组件修改	❌ 不可修改	✅ 可修改

（四）事件处理

1. 绑定事件

箭头函数（推荐）：

function Button() {
  return <button onClick={() => alert("Clicked!")}>Click Me</button>;
}

类组件的事件绑定：

class App extends React.Component {
  handleClick = () => {
    alert("Clicked!");
  };

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

2. 事件对象 `event`

在事件处理函数中，event 是 React 合成事件（SyntheticEvent）：

function Button() {
  const handleClick = (event) => {
    console.log(event.target);
  };

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

3. 阻止默认行为

function Link() {
  return (
    <a href="https://react.dev" onClick={(e) => e.preventDefault()}>
      Click me (but won't navigate)
    </a>
  );
}

4. 事件传参

function Button() {
  const handleClick = (name) => {
    alert(`Hello, ${name}`);
  };

  return <button onClick={() => handleClick("React")}>Click Me</button>;
}