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

一、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>;
}

---

三、总结

1. React 基础

• 采用 组件化开发 ，基于 Virtual DOM
• 使用 JSX 语法，简化 UI 代码
• 通过 函数组件 / 类组件 构建 UI

2. 组件数据管理

• props 用于 父组件向子组件传递数据
• state 用于 管理组件内部状态
• 组件间通信可通过 回调、Context API、Redux 进行（详见后续章节）

3. 事件处理

• 事件绑定推荐使用 箭头函数
• 事件对象 event 是 合成事件
• 可以使用 event.preventDefault() 阻止默认行为

---

接下来，我们将详细讲解 生命周期、Hooks 和 React 18 相关优化！ 🚀