React前端框架学习-EW帮帮网

在这里插入图片描述

一、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的特点与优势

声明式语法：使用JSX描述UI，直观易懂
组件化：将UI拆分为独立的、可复用的组件
单向数据流：数据流动方向明确，易于调试
虚拟DOM：通过DOM diff算法提高渲染效率
生态丰富：拥有庞大的社区和丰富的第三方库
跨平台：可用于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的工作原理

首次渲染：React创建虚拟DOM树并渲染到真实DOM
数据变化：当组件的状态或属性发生变化时，React创建新的虚拟DOM树
Diff算法：React比较新旧虚拟DOM树的差异（Diff）
最小化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的更新规则

不要直接修改State：应该使用setState()方法
State更新可能是异步的：React可能会批量处理多个setState()调用
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

React前端框架学习