编辑“︁React”︁

{{Infobox software
| name = React
| logo = React-icon.svg
| screenshot = React-example.png
| caption = React组件示例
| developer = [[Meta (company)|Meta]]（原Facebook）及社区
| released = {{Start date and age|2013|03|29}}
| programming_language = [[JavaScript]]
| genre = [[JavaScript库]]
| license = [[MIT许可证]]
| website = {{URL|https://reactjs.org/}}
}}

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

== 核心概念 ==

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

这一机制显著提升了界面更新效率，计算公式：
<math>\Delta DOM = diff(VirtualDOM_{new}, VirtualDOM_{old})</math>

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

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

编译后会转换为：
<syntaxhighlight lang="javascript">
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
</syntaxhighlight>

=== 组件化开发 ===
React应用由组件构成，分为两类：
* '''函数组件'''（推荐）：
<syntaxhighlight lang="jsx">
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
</syntaxhighlight>

* '''类组件'''：
<syntaxhighlight lang="jsx">
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
</syntaxhighlight>

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

<syntaxhighlight lang="jsx">
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>
  );
}
</syntaxhighlight>

== 生态系统 ==
React拥有丰富的生态系统：
* [[React Router]] - 客户端路由解决方案
* [[Redux]] - 状态管理库
* [[Next.js]] - 服务端渲染框架
* [[Gatsby]] - 静态站点生成器

== 性能优化 ==
常用优化技术包括：
* 使用React.memo进行组件记忆
* 使用useMemo/useCallback缓存计算结果
* 代码分割（通过React.lazy）
* 使用生产环境构建

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

<syntaxhighlight lang="jsx">
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;
</syntaxhighlight>

== 与其他框架比较 ==
{| class="wikitable"
|+ 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框架比较]]
* [[单页应用]]

== 参考资料 ==
{{Reflist}}

[[Category:JavaScript库]]
[[Category:前端开发]]
[[Category:开源软件]]