目录

React 

React的安装与使用

JSX语法及使用

模块与组件

React开发者工具的安装

面向组件编程

React 

React是一个用于构建用户界面的JavaScript库。用户界面:HTML页面(前端)。React主要用来写HTML页面，或构建Web应用。

如果从 MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。React起源于Facebook的内部项目，后又用来架设Instagram 的网站，并于2013年5月开源。

React高效的原因

1）使用虚拟DOM，不总是直接操作页面真实DOM。

2）DOM Diffing算法，最小化页面重绘。

React的安装与使用

新建终端执行如下npm命令：(默认安装最新版本)

# react包是核心，提供创建元素、组件等功能
# react-dom包提供DOM相关功能等
npm install react react-dom

警告：React 18 不再支持 ReactDOM.render。请改用 createRoot。在您切换到新的 API 之前，您的应用会像运行 React 17 一样运行。

React18于2022年3月29日发布。ReactDOM.render虽然在React18中已被弃用，但仍然能在兼容模式下运行并使用，就是控制台老是有个警告，看着闹心。

撰写本文时，React的版本已经达到18.2，这里提一下，因为React的版本在17更新到18时，有很多的语法在React18中都弃用了，但是有很多老项目还是使用React17的版本，所以我们还是需要学会一下React17的语法。 接下来的几篇文章都是围绕React17进行讲解，后期会更新到18版本讲解React的变化和使用。

为了消除React18中使用17的语法所产生的警告，我们需要降低版本至17，此时我们可以使用以下命令进行降级。

注意：npm install 安装库@版本号 --save
17.x 表示的更新范围为>=17.0.0&&< 18.0.0
17.2.x 表示的更新范围为>=17.2.0&&< 17.3.0

npm install react@17.x react-dom@17.x --save

JSX语法及使用

react定义的一种类似于XML的JS扩展语法：JS+XML，全称是JavaScript XML。

本质：React.createElement(component,props,...children)方法的语法糖。

作用：用来简化创建虚拟DOM

写法：var vdom =

hello jsx!

，它不是字符串也不是HTML/XML标签，它最终产生的就是一个JS对象，标签名是任意的，可以是HTML标签或其它标签。

注意：在jsx中定义虚拟DOM时，不要写引号；标签中混入JS表达式时要用 {} 。

注意：在jsx中样式的类名指定不要用class，要用className；内联样式要用style={{key:value}}的形式进行书写。

注意：在jsx中只有一个根标签；所有标签必须闭合 ；标签的首字母要是小写需写html存在的标签，要是大写则表明是要渲染组件，如果组件没有定义则报错。

和Vue框架一样，当我们要循环遍历数据的时候，也是需要一个特有的key值，如下：

模块与组件

模块：向外提供特定功能的js程序，一般就是一个js文件，随着业务逻辑增加，代码越来越多且复杂，使用模块能复用js，简化js的编写，提高js运行效率。模块化：当应用的js都以模块来编写的，这个应用就是一个模块化的应用。

组件：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，一个页面的功能有时会很复杂，使用组件能复用编码，简化项目编码，提高运行效率。组件化：当应用是以多组件的方式实现，这个应用就是一个组件化的应用。

React开发者工具的安装

React官方也提供了 React Developer Tools  这个开发工具，如果有条件的小伙伴可以直接在谷歌浏览器上，找到网上商店，进入搜索工具直接下载即可。没有条件的小伙伴推荐使用一个专门下载插件的网站：极简插件 ，在里面搜索相关插件也能进行下载。

安装完插件之后，f12可以看到控制台出现如下两个选项：

面向组件编程

react官方给我们提供了两种定义组件的方式，如下：

函数式组件

在我们使用jsx语法时，有如下情况：

类式组件

使用类式组件需要你对JS的类有一定的掌握，如果不熟悉或者忘记了类的使用，推荐看一下我之前对JS的class类的讲解：读懂JS中—Class类 。

查看官方文档给出的写法也是这样：