前端学习系列（6）：前端框架基础之React入门

最新推荐文章于 2025-11-04 17:14:31 发布

原创最新推荐文章于 2025-11-04 17:14:31 发布 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架 #学习

前端学习系列专栏收录该内容

15 篇文章

订阅专栏

前端学习系列（6）：前端框架基础之React入门

一、回顾与引入

上一期我们学习了Vue.js的基础知识，了解了它的基本概念、数据绑定、指令以及组件化开发。本期我们将走进另一个主流前端框架——React的世界，探索它是如何构建用户界面的。React由Facebook开发，以其高效的虚拟DOM、组件化架构和单向数据流等特性而受到广泛欢迎。

二、React的基本概念与安装配置

2.1 React是什么

React是一个用于构建用户界面的JavaScript库。它采用声明式编程风格，让开发者可以描述UI的最终状态，而不是命令式地去操作DOM。React的核心思想是将UI分解成一个个独立的、可复用的组件，每个组件都有自己的状态（state）和属性（props），通过组件的组合和交互来构建复杂的应用程序。

2.2 安装React

React的安装可以通过多种方式，最常见的是使用create - react - app脚手架工具。首先确保已经安装了Node.js和npm（Node.js包管理器），然后在命令行中执行以下命令来创建一个新的React项目：

npx create - react - app my - react - app
cd my - react - app

这会在当前目录下创建一个名为my - react - app的React项目，并且自动安装好React及其相关依赖。进入项目目录后，可以使用npm start启动开发服务器，在浏览器中查看运行效果。

三、创建React组件

3.1 函数式组件

在React中，创建组件的方式之一是使用函数式组件。函数式组件是一个简单的JavaScript函数，它接收一个包含属性（props）的对象作为参数，并返回一个React元素。例如，创建一个简单的HelloWorld组件：

import React from'react';

const HelloWorld = (props) => {
    return <div>Hello, {props.name}</div>;
};

export default HelloWorld;

在上述代码中，HelloWorld函数接收props参数，通过解构可以获取其中的name属性，并在返回的React元素中使用。jsx语法允许在JavaScript代码中直接编写类似HTML的代码，它会被Babel转译成普通的JavaScript代码。

3.2 类组件

除了函数式组件，React还支持类组件。类组件需要继承自React.Component，并且必须包含一个render方法，render方法返回一个React元素。例如：

import React, { Component } from'react';

class HelloWorldClass extends Component {
    render() {
        return <div>Hello, {this.props.name}</div>;
    }
}

export default HelloWorldClass;

类组件可以使用this.props来访问属性，并且拥有自己的生命周期方法和状态管理机制，适用于更复杂的组件逻辑。

四、JSX语法详解

4.1 JSX基础

JSX是一种JavaScript的语法扩展，它看起来很像HTML，但实际上是在JavaScript中编写React元素的一种方式。在JSX中，可以嵌入JavaScript表达式，用{}包裹起来。例如：

const count = 5;
const element = <div>The count is: {count}</div>;

在这个例子中，{count}就是一个JavaScript表达式，它会被替换为count变量的值。

4.2 JSX属性和样式

在JSX中设置属性和HTML类似，但有些属性名需要使用驼峰命名法。例如，class属性在JSX中要写成className，for属性要写成htmlFor。设置内联样式时，需要使用一个对象来定义样式，并且属性名也是驼峰命名法。例如：

const myStyle = {
    color: 'blue',
    fontSize: '20px'
};

const element = <div className="my - class" style={myStyle}>Styled Div</div>;

这里通过style属性和一个包含样式属性的对象来设置元素的内联样式。

五、React中的数据绑定与事件处理

5.1 数据绑定

React采用单向数据流，数据从父组件流向子组件。父组件通过属性（props）将数据传递给子组件，子组件不能直接修改父组件传递过来的props。如果子组件需要修改数据，通常是通过调用父组件传递过来的函数来通知父组件进行数据更新。

5.2 事件处理

React中的事件处理和原生JavaScript的事件处理类似，但有一些语法上的差异。例如，绑定一个点击事件：

import React, { Component } from'react';

class ButtonComponent extends Component {
    handleClick = () => {
        console.log('Button clicked!');
    };

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

export default ButtonComponent;

在这个例子中，定义了一个handleClick方法，通过onClick属性将该方法绑定到按钮的点击事件上。注意，在类组件中使用箭头函数定义方法可以避免this指向问题。