React 是一个用于构建用户界面的开源JavaScript库，由Facebook开发并维护。

JSX 语法

JSX因React框架而流行。 React 使用 JSX（JavaScript XML），虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。

JSX是基于ES6的JavaScript的语法扩展，它允许你在JavaScript文件中书写类似 HTML 的标签，使代码更具可读性与简洁性。JSX不能被浏览器直接识别，在运行时需要依赖 babel 或 TypeScript 之类的编译工具将 JSX 代码转换为普通的JavaScript来执行。

每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

下面是两个例子：

用 JSX 编写的代码：

js 复制代码

const myElement = <h1>I Love JSX!</h1>;
// createRoot 允许在浏览器的 DOM 节点中创建根节点以显示 React 组件
const root = ReactDOM.createRoot(document.getElementById('root'));
// 在已经创建根节点之后，需要调用 root.render() 来渲染组件 
root.render(myElement);

不使用 JSX 的代码：

js 复制代码

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

JSX 看起来和 HTML 很像，但它的语法更加严格如标签必须闭合，并且可以动态展示信息。

在JSX中嵌入表达式

js 复制代码

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;

组件化

React 的核心概念之一便是组件化，每个 React 组件都是一个 JavaScript 函数，它会返回一些标签，React 会将这些标签渲染到浏览器上。

React 组件演变顺序经过三个阶段：

Class组件
Class 与函数式组件共存
函数式组件

函数式组件与类式组件的区别：

定义方式：
- 函数式组件：使用JavaScript函数来定义组件
- 类式组件 ：使用ES6类来定义组件，通过继承React.Component来创建。
状态管理：
- 函数式组件 ：在React Hooks出现之前，函数式组件是无状态的，只能接收props。现在，可以使用useState等Hooks来管理状态。
- 类式组件 ：类式组件可以通过this.state来管理内部状态，并且有生命周期方法来处理状态的变化（如componentDidMount、componentDidUpdate和componentWillUnmount）。
生命周期方法：
- 函数式组件 ：在React Hooks之前，函数式组件没有生命周期方法。现在，可以通过useEffect来模拟大多数生命周期方法的行为。
- 类式组件：组件挂载、更新和卸载。
代码简洁性：函数式组件通常更简洁
Hooks的可用性：
- 函数式组件：函数式组件可以使用Hooks来访问之前仅在类式组件中可用的功能，如状态、副作用和上下文。
- 类式组件：类式组件不能直接使用Hooks，但可以通过将Hooks封装在高阶组件中或在类方法中使用Hooks来间接使用。

总结

函数式组件没有模板、生命周期、指令等，但是React Hooks为函数式组件提供了丰富的功能，如在类式组件中定义 state 等同于在函数式组件中调用 useState，也解决了类式组件的很多固有缺陷。

React JSX 与 组件化

JSX 语法

组件化

总结

React JSX 与组件化