从 React17-rc.2 谈起：改造 JSX 转换逻辑背后的缘由
2024-01-26 21:38:05
React17-rc.2 的发布，无疑在 JavaScript 领域掀起了一阵不小的波澜。其中，全新的 JSX 转换逻辑尤为引人注目。对于这一变动，开发人员们可谓褒贬不一，然而抛开表象，我们不禁要问，为什么要用新的转换语法呢？带着这个疑问，本文将结合 React 的发展历程，带你深入理解转换逻辑的演变，以及背后的原因。准备好踏上这场 JSX 探索之旅了吗？
React 的发展历程：从类组件到函数组件
React 最开始的设计是围绕着类组件来的。类组件拥有自己的状态和生命周期方法，并且可以通过继承来复用代码。然而，随着 hooks 的流行，使得函数组件也变得越来越流行了。
函数组件没有状态，也不拥有生命周期方法，但它们更加轻量级，也更容易测试。因此，在 React16.8 中，hooks 被正式引入，并在 React17 中进一步得到完善。
JSX 转换逻辑的演变
JSX 是 React 中一种语法糖，它允许你使用 HTML 般的语法来编写 JavaScript 代码。这使得 React 代码更加直观，也更容易学习。
在 React17-rc.2 之前，JSX 的转换逻辑是这样的：
const element = React.createElement(
"div",
{ className: "my-component" },
"Hello, world!"
);
这段代码将被转换为以下 JavaScript 代码：
const element = {
type: "div",
props: {
className: "my-component",
children: ["Hello, world!"]
}
};
这种转换逻辑虽然能够正常工作，但存在两个主要问题：
- 性能问题： 这种转换逻辑需要创建一个新的 JavaScript 对象，这可能会导致性能问题，尤其是在处理大型组件时。
- 可读性问题： 这种转换逻辑的输出结果很难阅读和理解。
React17-rc.2 中的 JSX 转换逻辑
为了解决上述问题，React17-rc.2 中引入了新的 JSX 转换逻辑。这种转换逻辑不需要创建一个新的 JavaScript 对象，而是直接将 JSX 代码转换为 JavaScript 函数。
const element = () => (
<div className="my-component">
Hello, world!
</div>
);
这段代码将被转换为以下 JavaScript 代码：
const element = () => React.createElement(
"div",
{ className: "my-component" },
"Hello, world!"
);
这种转换逻辑解决了上述两个问题：
- 性能问题： 这种转换逻辑不需要创建一个新的 JavaScript 对象，因此可以提高性能。
- 可读性问题： 这种转换逻辑的输出结果更加容易阅读和理解。
为什么要使用新的 JSX 转换逻辑？
新的 JSX 转换逻辑具有以下优点：
- 性能更好： 这种转换逻辑不需要创建一个新的 JavaScript 对象，因此可以提高性能。
- 可读性更强： 这种转换逻辑的输出结果更加容易阅读和理解。
- 更易于调试： 这种转换逻辑更容易调试，因为你可以在浏览器中直接看到转换后的 JavaScript 代码。
- 更适合函数组件： 这种转换逻辑更适合函数组件，因为函数组件没有状态和生命周期方法，因此不需要创建一个新的 JavaScript 对象。
总的来说，React17-rc.2 中的 JSX 转换逻辑是一项非常有意义的更新。它解决了旧转换逻辑的性能和可读性问题，也更加适合函数组件。如果你还没有尝试过，我强烈建议你试一试。
