在日常的 React 开发工作中,我们已经习惯了使用 JSX
来描述 React 的组件内容。关于 JSX
语法本身,相信每位 React 开发者都不陌生
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(
<HelloMessage name='Taylor' />,
document.getElementById("hello-example"),
);
JSX 到底是什么
JSX 到底是什么,我们先来看看React 官网给出的一段定义:
JSX 是 JavaScript 的一种语法扩展,它和模板语言很接近,但是它充分具备 JavaScript 的能力。
具有 JavaScript 的能力是什么意思呢?
可以在 JSX 中嵌入表达式
在下面的例子中,我们声明了一个名为 name
的变量,然后在 JSX 中使用它,并将它包裹在大括号中:
const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(element, document.getElementById("root"));
在 JSX 语法中,你可以在大括号内放置任何有效的 JavaScript 表达式。例如,2 + 2
,user.firstName
或 formatName(user)
都是有效的 JavaScript 表达式。
JSX 也是一个表达式
在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象。
也就是说,你可以在 if
语句和 for
循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
JSX 的本质
JSX 仅仅只是 React.createElement(component, props, ...children)
函数的语法糖。
如下 JSX 代码:
JSX格式
被解析成了 React.createElement
,createElement
函数包含多个参数
- 第一个参数是
type
(元素类型) - 第二个参数是
props
- 第三个及第 N 个参数是
children
通过这样的对比,你可以清晰地发现,JSX 代码更为简洁,而且代码结构层次更为清晰。
因为 React 需要将组件转化为虚拟 DOM 树,所以我们在编写代码时,实际上是在手写一棵结构树。而 XML 在树结构的描述上天生具有可读性强的优势。
但这样可读性强的代码仅仅是给写程序的同学看的,实际上在运行的时候,会使用 Babel 插件将 JSX 语法的代码还原为 React.createElement
的代码。
你会发现,在实际功能效果一致的前提下,JSX 代码层次分明、嵌套关系清晰;
而 React.createElement
代码则给人一种非常混乱的“杂糅感”,这样的代码不仅读起来不友好,写起来也费劲。
为什么使用 JSX
- 通过 JSX 创建虚拟 DOM
- JSX 语法糖允许前端开发者使用类似
HTML
标签语法来创建虚拟 DOM,在降低学习成本的同时,也提升了研发效率与研发体验。
读到这里,相信你已经充分理解了JSX 是 JavaScript 的一种语法扩展,它和模板语言很接近,但是它充分具备 JavaScript 的能力
React 源码的 JSX 工作流程
- JSX 转换为
React.createElement
函数 React.createElement
执行后返回React.Element
(虚拟 DOM)- 最后调用
ReactDOM.render()
转换为真实 DOM
JSX 是如何转换为 React.createElement 的呢? 欢迎大家在评论区交流讨论
最后
文章浅陋,欢迎各位看官评论区留下的你的见解!
觉得有收获的同学欢迎点赞,关注一波!