React前端框架学习

一、React简介与发展历程

1.1 React是什么

React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它采用声明式语法和组件化思想，通过虚拟DOM（Virtual DOM）提高渲染效率，使开发者能够构建可复用、可维护的大型Web应用。

1.2 React的诞生与发展

• 2011年：React在Facebook内部诞生，最初用于Facebook的新闻信息流功能
• 2012年：Instagram开始采用React
• 2013年：React正式开源
• 2015年：React Native发布，允许使用React开发原生移动应用
• 2016年：React 15.0发布，引入Fiber架构
• 2017年：React 16.0发布，引入Error Boundaries、Portals等新特性
• 2018年：React Hooks发布，彻底改变了函数组件的使用方式
• 2020年：React 17.0发布，主要是架构改进，为未来版本做准备
• 2022年：React 18.0发布，引入并发特性和自动批处理

1.3 React的特点与优势

1. 声明式语法：使用JSX描述UI，直观易懂
2. 组件化：将UI拆分为独立的、可复用的组件
3. 单向数据流：数据流动方向明确，易于调试
4. 虚拟DOM：通过DOM diff算法提高渲染效率
5. 生态丰富：拥有庞大的社区和丰富的第三方库
6. 跨平台：可用于Web、移动端、桌面应用等多个平台

二、React核心概念

2.1 JSX

JSX（JavaScript XML）是一种JavaScript的语法扩展，允许在JavaScript代码中编写类似XML的结构。它不是必须的，但使用JSX可以更直观地描述UI结构。

2.1.1 JSX基本语法

JSX看起来像HTML，但实际上是JavaScript。在JSX中，可以：

• 使用花括号{}嵌入JavaScript表达式
• 使用className代替class（因为class是JavaScript的保留字）
• 使用htmlFor代替for（因为for是JavaScript的保留字）

下面是一个简单的JSX示例：

const element = (<div className="greeting"><h1>Hello, {user.name}</h1><p>Welcome to our website!</p></div>
);

2.1.2 JSX转译过程

JSX会被Babel等工具转译为普通的JavaScript函数调用。例如：

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

会被转译为：

const element = React.createElement('h1',{className: 'greeting'},'Hello, world!'
);

2.2 虚拟DOM（Virtual DOM）

虚拟DOM是React的核心概念之一，它是真实DOM的抽象表示，以JavaScript对象的形式存在于内存中。React通过比较新旧虚拟DOM的差异，只更新需要更新的真实DOM部分，从而提高渲染效率。

2.2.1 虚拟DOM的工作原理

1. 首次渲染：React创建虚拟DOM树并渲染到真实DOM
2. 数据变化：当组件的状态或属性发生变化时，React创建新的虚拟DOM树
3. Diff算法：React比较新旧虚拟DOM树的差异（Diff）
4. 最小化DOM操作：React只更新发生变化的真实DOM部分

2.2.2 Diff算法的优化策略

• 树比较：不同类型的元素会产生不同的树
• 组件比较：相同类型的组件，保持实例不变
• 元素比较：对于同一层级的元素，通过key来识别哪些元素发生了变化

2.3 组件

组件是React应用的基本构建块，它将UI和逻辑封装在一起，使代码更易于维护和复用。

2.3.1 函数组件与类组件

• 函数组件：接收props并返回JSX，是无状态组件
• 类组件：通过ES6的class语法定义，继承自React.Component，是有状态组件

下面是函数组件和类组件的示例：

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

2.3.2 组件的组合与复用

组件可以嵌套使用，形成组件树。这种组合方式使代码更具模块化和可复用性。

function App() {return (<div><Welcome name="Alice" /><Welcome name="Bob" /><Welcome name="Charlie" /></div>);
}

2.4 Props

Props（Properties的缩写）是React组件的输入数据，它是只读的，不能在组件内部修改。Props使组件可以接收外部数据并进行渲染。

2.4.1 Props的基本用法

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

2.4.2 Props的默认值

可以通过defaultProps为组件设置默认props：

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}Welcome.defaultProps = {name: 'Guest'
};

2.4.3 Props的类型检查

可以使用prop-types库对props进行类型检查：

import PropTypes from 'prop-types';function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}Welcome.propTypes = {name: PropTypes.string.isRequired
};

2.5 State

State是组件内部的状态数据，用于存储组件的动态信息。与props不同，state是可变的，可以在组件内部修改。

2.5.1 State的基本用法（类组件）

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>);}
}

2.5.2 State的更新规则

1. 不要直接修改State：应该使用setState()方法
2. State更新可能是异步的：React可能会批量处理多个setState()调用
3. State更新会合并：当调用setState()时，React会将提供的对象合并到当前state

2.5.3 State与Hooks（函数组件）

在函数组件中，可以使用useState Hook来管理state：

import React, { useState } from 'react';function Clock() {const [date, setDate] = useState(new Date());useEffect(() => {const timerID = setInterval(() => setDate(new Date()),1000);return () => clearInterval(timerID);}, []);return (<div><h1>Hello, world!</h1><h2>It is {date.toLocaleTimeString()}.</h2></div>);
}

2.6 生命周期方法

生命周期方法是类组件特有的方法，它们在组件的不同阶段自动调用，允许开发者在特定时间点执行代码。

2.6.1 挂载阶段

• constructor()：组件初始化时调用
• render()：渲染UI
• componentDidMount()：组件挂载到DOM后调用，适合进行API调用、事件监听等

2.6.2 更新阶段

• render()：重新渲染UI
• componentDidUpdate()：组件更新后调用，适合进行DOM操作、条件性API调用等

2.6.3 卸载阶段

• componentWillUnmount()：组件卸载前调用，适合清理定时器、取消订阅等

2.6.4 生命周期方法示例

class Example extends React.Component {constructor(props) {super(props);this.state = { c