React 第二章 JSX

JSX是一种JavaScript的扩展语法,用于在React中编写组件的结构。JSX允许开发者将HTML结构和JavaScript代码混合在一起,使得编写React组件更加直观和简洁。

通过使用JSX,开发者可以在JavaScript中直接编写类似HTML的标记,例如<div>、<p>等,同时可以将JavaScript表达式嵌入到标记中,使得动态的数据渲染变得更加方便。在React中,JSX被转换为React元素,然后由React进行渲染和更新。

JSX的语法相对于传统的JavaScript语法更加灵活,但也需要使用特定的工具进行预编译,例如Babel。这样可以在不支持JSX的浏览器环境中使用React,并将JSX代码编译为标准的JavaScript语法。。

JSX 基础语法

React 中,使用 JSX 来描述页面。

js 复制代码
function App() {
  return (
    <div>Hello React~</div>
  );
}

你可以把类似于 HTML 的代码单独提取出来,例如:

js 复制代码
function App() {
  const ele = <div>Hello React~</div>
  return (
    ele
  );
}

JSX 来描述页面时,语法规则:

  • 根元素只能有一个
  • JSX 中使用 JavaScript 表达式。表达式写在花括号 {}
  • 属性值指定为字符串字面量,或者在属性值中插入一个 JavaScript 表达式
  • style 对应样式对象,class 要写作 className
  • 注释需要写在花括号
  • JSX 允许在模板中插入数组,数组会自动展开所有成员
  • 使用驼峰式命名法给大部分属性命名

createElement 方法

JSX 是一种 JavaScript 的语法扩展,Babel 会把 JSX 转译成一个名为 React.createElement 函数调用。

js 复制代码
React.createElement(type, [props], [...children]);

参数说明:

  • type :创建的 React 元素类型(可选的值有:标签名字符串、React 组件)。
  • props (可选):React 元素的属性。
  • children (可选):React 元素的子元素。

例如,下面两种代码的作用完全是相同的:

js 复制代码
const element1 = (
    <h1 className="greeting">
    	Hello, world!
    </h1>
);
const element2 = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

这些对象被称为 "React 元素"。它们描述了你希望在屏幕上看到的内容。

可以看出,JSX 的本质其实就是 React.createElement 方法的一种语法糖。

相关推荐
木木黄木木1 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning212 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一2 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla2 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡3 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu3 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c3 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪3 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆3 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻3 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html