一、什么是React

React 是一个用于构建用户界面的 JavaScript 库。React的语法是jsx，通过使用这种语法，可以在react代码中直接混合使用js和html来编写代码，这样代码的逻辑就非常清晰。

二、React的特点

1. React是一个视图层框架
2. 并且以组件形式进行开发
3. 高效 通过对DOM的模拟使用了虚拟DOM，最大限度地减少与DOM的交互。
4. 特殊的语法jsx

JSX

什么是JSX呢？

JSX 是一种 JS 扩展的表达式，并且带有逻辑的标记语法 支持样式以及逻辑表达式和事件

为什么要使用JSX

JSX能给人在视觉上带来辅助作用，还可以让React显示更多的信息，以便于进行页面的开发

JSX的特点

JSX 执行更快，因为它在编译为js代码后进行了优化. 类型很安全，可以在编译过程中发现错误

使用语法

1. 可以使用大括号嵌入表达式

2. 标签中混入JS表达式时要用{}

3. 类名使用className

4. 行内样式 style

三、React组件

函数组件

什么是函数组件

函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。

创建方式

什么是props

1. props是父子组件之间通信的纽带。
2. props是一个对象，通过props可以访问到父组件传递过来的自定义属性和children。
3. props是只读的（不能修改它）
4. 通过props，可以向子组件传递 基本数据类型、数组、JSX对象、普通对象、函数等。

类组件

什么是类组件

类组件是一个继承 React.Component的 JavaScript类，它有一个render函数。 让我们来看看一个简单的例子。 当定义一个类组件时，我们必须继承 React.Component。

创建方式

1. 类组件必须继承React.Component
2. 必须有render函数
3. render函数中必须有return

无状态函数式组件

无状态函数式组件，顾名思义，无状态，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。

总结

1. 使用函数式组件是默认的、最现代的方式，代码更简洁，更灵活
2. v16.8 之前的版本只支持类组件，所以很多以前项目是使用类组件写的。
3. 个人喜好 更偏向使用函数组件
4. 在同一个APP中，两种组件可以同时存在。但一般情况下，应该只使用二者之一，要么只写函数式组件，要么只写类组件。