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

React 核心概念与生态系统

article 2025/9/12 18:04:13

1. React 简介

React 是由 Facebook 开发并开源的一个用于构建用户界面的 JavaScript 库。它主要用于构建单页应用（SPA），其核心理念是组件化和声明式编程，即 ui = render(data)。

2. 核心特点

2.1. 声明式编程

React 使用声明式编程范式来描述 UI。开发者只需描述界面在某一特定状态下的样子，React 会负责在状态变化时高效地更新和渲染界面。

React 的声明式特性通过 JSX 语法实现，开发者只需关注 state 和 props 的变化，React 会自动更新渲染视图。

2.2. 组件化

React 应用由多个组件组成，每个组件对应页面中的一个部分。组件是可重用的独立代码块，使得开发和维护大型应用变得更加高效。

2.3. 虚拟 DOM (Virtual DOM)

React 使用虚拟 DOM 来优化性能。虚拟 DOM 是一个轻量级的 JavaScript 对象，作为实际 DOM 的抽象副本。当状态或数据发生变化时，React 首先更新虚拟 DOM，然后计算出最小的 DOM 变更并将其应用到实际 DOM 上，从而提高性能。

在 React 中，引入了 Fiber 架构用于桥接数据变更与 DOM 更新。

2.4. 单向数据流

React 中的数据流是单向的。这种数据流方式使得数据管理更加清晰和可预测，有助于调试和维护。

2.5. JSX 语法

JSX 是 JavaScript 的一种语法扩展，允许在 JavaScript 代码中编写类似 HTML 的标签。JSX 使得定义组件结构更加直观和简洁。

3. 核心概念

3.1. 组件

组件是 React 应用的基础单元，可以是类组件（使用 ES6 类语法）或函数组件（使用函数语法）。

// 类组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}// 函数组件
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

3.2. 状态 (State)

状态是组件内部的数据，用于控制组件的行为和渲染。状态可以通过 this.setState 方法进行更新。

class Clock extends React.Component {constructor(props) {super(props);this.state = { date: new Date() };}componentDidMount() {this.timerID = setInterval(() => this.tick(), 1000);}componentWillUnmount() {clearInterval(this.timerID);}tick() {this.setState({date: new Date()});}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.date.toLocaleTimeString()}.</h2></div>);}
}

3.3. 属性 (Props)

属性是从父组件传递到子组件的数据。属性是不可变的，子组件只能读取属性，而不能修改它们。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="Sara" />;

4. 生态系统

4.1. React Router

React Router 是一个用于在 React 应用中实现路由的库，允许开发者根据 URL 的变化渲染不同的组件。

4.2. Redux => Zustand

Redux 是一个用于管理应用状态的库，常与 React 结合使用。它通过全局状态树和单向数据流来简化状态管理。

注：Zustand 是 Redux 的一种轻量级替代方案。

4.3. Create React App => Vite React CLI

Create React App 是一个官方的脚手架工具，帮助开发者快速创建和配置 React 项目。

注：Vite 是另一种现代构建工具，提供了更快的开发体验。

5. 示例代码

import React from 'react';
import ReactDOM from 'react-dom';function App() {return (<div><h1>Hello, React!</h1><Welcome name="World" /></div>);
}function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}ReactDOM.render(<App />, document.getElementById('root'));