【前端】【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 相关优化! 🚀

相关推荐
qq. 28040339842 小时前
CSS层叠顺序
前端·css
喝拿铁写前端3 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.3 小时前
vue 路由
前端·javascript·vue.js
烛阴3 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91533 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing4 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学4 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪4 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡4 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪4 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试