当前位置：首页 > news >正文

React 前端框架介绍

news 来源：原创 2025/5/7 2:31:30

什么是 React？

React 是一个由 Facebook 开发并维护的开源 JavaScript 库，用于构建用户界面。它主要用于创建交互式用户界Face（UI），尤其是当数据变化时需要更新部分视图时非常有效。React 的核心思想是组件化和声明性编程，这使得开发者可以轻松地创建、组合和重用代码。

React 的主要特点

组件化设计：
- React 鼓励使用组件化设计。每个组件是一个独立的模块，可以单独开发、测试和调试。这种方式提高了代码的可维护性和可重用性。
声明性编程：
- 与传统的命令式编程不同，React 使用声明性编程。开发者只需要描述 UI 应该是什么样子， React 会自动处理组件之间的交互和状态更新。
虚拟 DOM：
- React 使用虚拟 DOM 来优化性能。当状态发生变化时，React 只重新渲染影响部分，而不是整个页面，从而显著提高了应用的效率。
一致性：
- React 确保 UI 始终与数据同步。无论是初始加载还是后续更新，React 都会确保 UI 状态和数据状态的一致性。

React 的基本概念

组件（Components）

在 React 中，UI 由多个独立的、可重用的组件组成。组件可以分为两类：函数式组件和类式组件。

函数式组件：使用简单的 JavaScript 函数来定义组件。适用于简单的、不需要状态或生命周期方法的组件。

jsx

function HelloWorld() { return <h1>Hello, world!</h1>; }

类式组件：使用 ES6 类来定义组件。适用于复杂的、需要状态或生命周期方法的组件。

jsx

class HelloWorld extends React.Component { render() { return <h1>Hello, world!</h1>; } }

JSX（JavaScript XML）

JSX 是一个看起来像 HTML 的语法扩展，用于在 JavaScript 中编写 React 组件。它使得代码更加直观和易读。

jsx

const element = <h1>Hello, world!</h1>;

状态（State）

状态是组件内部的 privatestate，用于存储变化数据并在组件重新渲染时反映出来。使用

useState

钩子函数可以在函数式组件中管理状态。

jsx

import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }

属性（Props）

属性是组件的输入值，用于向子组件传递数据。属性是只读的，不能在组件内部被修改。

jsx

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

生命周期方法

类式组件中可以使用生命周期方法来管理组件的挂载、更新和卸载过程。常见的生命周期方法包括

componentDidMount

和

componentWillUnmount

。

jsx

class HelloWorld extends React.Component { componentDidMount() { // 组件挂载时执行的代码 } componentWillUnmount() { // 组件卸载时执行的代码 } render() { return <h1>Hello, world!</h1>; } }