React 入门教程系列（一）——什么是 React

绝地灬酷狼 2023-06-06 10:35 15阅读 0赞

# React 入门教程系列（一）——什么是 React #

## [React介绍][React] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 `JavaScript MVC` 框架，都不满意，就决定自己写一套，用来架设`Instagram` 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源。

React 是用于构建用户界面的 JavaScript 库，开发者可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

### 1.1 声明式 ###

React 使创建交互式 UI 变得轻而易举，改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让代码更加可靠，且方便调试。

### 1.2 组件化 ###

React 可以创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版，因此可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

### 1.3 一次学习，随处编写 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]  
React 现在不仅可以用来编写网页，**还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。**

### 1.4 高效 ###

React 有两大法宝，使得构建页面更加高效并且性能好。

*  **虚拟DOM，不直接操作DOM，提高性能**
 *  **DOM Diff 算法，可最小化页面重绘。**

下面，可以跟着我一起进入 React 的世界。**`教程简单通俗易懂，每个知识点都会有相应的实例进行巩固，跟着我的图文教程走下来，相信可以很快的掌握。`**

[React]: https://baike.baidu.com/item/react/18077599?fr=aladdin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]: /images/20230601/bcb1e5a7c03a4bd3b7139a12dc11d597.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]: /images/20230601/3bcc9d149f0442bea6697e0f6cc9c8f8.png