【前端】【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 语法规则
  • 必须有唯一根节点

    jsx 复制代码
    return (
      <div>
        <h1>Hello React</h1>
      </div>
    );
  • 使用 {} 表达式插入变量

    jsx 复制代码
    const name = "React";
    return <h1>Hello, {name}!</h1>;
  • 必须闭合标签

    jsx 复制代码
    <input type="text" />  // 正确

(二)组件(Component)

1. 组件的概念

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

2. 组件的分类
  • 函数组件(Function Component)

    jsx 复制代码
    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
  • 类组件(Class Component)

    jsx 复制代码
    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }
3. 组件的通信方式
  • 父组件向子组件传递 props

    jsx 复制代码
    function Child(props) {
      return <h1>{props.message}</h1>;
    }
    
    function Parent() {
      return <Child message="Hello from Parent" />;
    }
  • 子组件向父组件传递事件

    jsx 复制代码
    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 接收参数:

    jsx 复制代码
    function Greeting(props) {
      return <h1>Hello, {props.name}!</h1>;
    }
2. state(状态)
  • 组件内部的可变数据,由组件自身维护。

  • useState 在函数组件中定义状态:

    jsx 复制代码
    function Counter() {
      const [count, setCount] = React.useState(0);
      
      return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
    }
  • 在类组件中,使用 this.state

    jsx 复制代码
    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. 绑定事件
  • 箭头函数 (推荐):

    jsx 复制代码
    function Button() {
      return <button onClick={() => alert("Clicked!")}>Click Me</button>;
    }
  • 类组件的事件绑定

    jsx 复制代码
    class App extends React.Component {
      handleClick = () => {
        alert("Clicked!");
      };
    
      render() {
        return <button onClick={this.handleClick}>Click Me</button>;
      }
    }
2. 事件对象 event
  • 在事件处理函数中,eventReact 合成事件(SyntheticEvent)

    jsx 复制代码
    function Button() {
      const handleClick = (event) => {
        console.log(event.target);
      };
    
      return <button onClick={handleClick}>Click Me</button>;
    }
3. 阻止默认行为
jsx 复制代码
function Link() {
  return (
    <a href="https://react.dev" onClick={(e) => e.preventDefault()}>
      Click me (but won't navigate)
    </a>
  );
}
4. 事件传参
jsx 复制代码
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 相关优化! 🚀

相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫4 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron