React

React

文件:React-icon.svg
文件:React-example.png React组件示例
Developer(s)	Meta（原Facebook）及社区
Initial release	March 29, 2013 (2013-03-29)
模板:Infobox software/simple
Repository	{{URL|example.com|optional display text}}
Written in	JavaScript
Engine
Type	JavaScript库
License	MIT许可证
Website	reactjs.org

React（常被称作React.js或ReactJS）是一个用于构建用户界面的开源JavaScript库，由Meta（原Facebook）及开发者社区维护。它主要用于构建单页应用（SPA）中的可复用UI组件，采用声明式编程范式提高代码可预测性和开发效率。

核心概念

虚拟DOM

React的核心创新是引入了虚拟DOM（Virtual DOM）概念。当应用状态改变时： 1. React先在内存中创建虚拟DOM树 2. 通过高效的diff算法比较新旧虚拟DOM 3. 仅更新真实DOM中必要的部分

这一机制显著提升了界面更新效率，计算公式： $\mathrm{\Delta }DOM=diff(VirtualDO{M}_{new},VirtualDO{M}_{old})$

JSX语法

React使用JSX语法扩展，允许在JavaScript中直接编写类似HTML的结构：

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

编译后会转换为：

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

组件化开发

React应用由组件构成，分为两类：

• 函数组件（推荐）：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• 类组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

状态管理

React通过useState Hook（16.8+版本）或this.state（类组件）管理组件状态：

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

生态系统

React拥有丰富的生态系统：

• React Router - 客户端路由解决方案
• Redux - 状态管理库
• Next.js - 服务端渲染框架
• Gatsby - 静态站点生成器

性能优化

常用优化技术包括：

• 使用React.memo进行组件记忆
• 使用useMemo/useCallback缓存计算结果
• 代码分割（通过React.lazy）
• 使用生产环境构建

示例应用

以下是一个完整的计数器应用：

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center' }}>
      <h1>React Counter</h1>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

export default App;

与其他框架比较

React vs Vue vs Angular

特性	React	Vue	Angular
类型	库	渐进式框架	完整框架
学习曲线	中等	平缓	陡峭
数据绑定	单向	双向	双向
DOM操作	虚拟DOM	虚拟DOM	真实DOM

版本历史

• 2013年3月：首次发布
• 2015年：React Native发布
• 2018年：引入Hooks API
• 2022年3月：发布React 18，支持并发渲染

参见

• 前端开发
• JavaScript框架比较
• 单页应用