「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战」
JSX 简介
JSX的全称是 Javascript and XML
,React发明了JSX,它是一种可以在JS中编写XML的语言。
JSX更像一种模板,类似于Vue中的 template
。
为什么使用JSX?
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。
React不强制要求使用JSX。
如何使用JSX
在JSX中使用表达式
在JSX中变量和表达式放在大括号{}
中。
const name = 'Josh Perez';
const element = <h1>Hello, { name }</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
复制代码
JSX中指定属性
JSX中使用 camelCase
(小驼峰命名)来定义属性的名称,因此 class 变成了 className。
const name = 'Josh Perez';
const element = <h1 className="app">Hello, { name }</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
复制代码
JSX中使用样式
JSX中使用 camelCase
(小驼峰命名) 语法来设置内联样式属性. React
会在指定元素数字后自动添加 px
。
const name = 'Josh Perez';
const style = {
fontSize: 100,
color: '#FF0000'
}
const element = <h1 style={ style }>Hello, { name }</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
复制代码
JSX中使用注释
JSX中注释写在 {/*...我是一段注释...*/}
中。
ReactDOM.render(
<div>
<h1>Hello World!</h1>
{/*注释...*/}
</div>,
document.getElementById('root')
);
复制代码
JSX本质刨析
JSX是JS的语法糖,编译时JSX会通过Babel编译成JS。React源码中使用React.createElement()方法来创建JSX,该方法依次接收DOM节点(比如div、span)、属性集合(比如className、style)和children(子节点)三个参数,并返回一个JS对象,也就是虚拟DOM。
以下两段示例是等价的:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
复制代码
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
复制代码
React.createElement()方法简单点是以下这样的:
function createElement(tag, attrs, ...children) {
attrs = attrs || {};
// 返回一个JS对象,也就是虚拟Dom
return {
tag,
attrs,
children,
key: attrs.key || null,
};
}
复制代码
总结
本期讲解了React核心概念JSX,以上例子和部分术语参考React官方文档,适合React新手学习参考,后期会计划边学边输出React基础系列,与大家共同成长。