JSX语法简介

本文介绍了React中的核心机制——虚拟DOM及其如何通过JSX提高应用性能。深入探讨了JSX语法特性,包括三元表达式、数组递归、事件绑定、样式使用及HTML转义等内容,并展示了自定义组件的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 

JSX简介

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。

如下(JS写法)

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

等价于(JSX写法)

复制代码
var root =(
  <ul className="my-list">
    <li>First Text Content</li>
    <li>Second Text Content</li>
  </ul>
);
复制代码

后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中,JSX在产品打包阶段都已经编译成纯JavaScript,JSX的语法不会带来任何性能影响。另外,由于JSX只是一种语法,因此JavaScript的关键字class, for等也不能出现在XML中,而要如例子中所示,使用className, htmlFor代替,这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM.

 

JSX语法介绍

大括号里是JavaScript,不要加引号,加引号就会被当成字符串。

三元表达式

JSX本身就和XML语法类似,可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式.例如:

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

上述代码经过JSX编译后会得到:

var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);
数组递归

数组循环,数组的每个元素都返回一个React组件。

复制代码
var lis = this.todoList.todos.map(function (todo) {
  return  (
    <li>
      <input type="checkbox" checked={todo.done}>
      <span className={'done-' + todo.done}>{todo.text}</span>
    </li>
  );
});

var ul = (
  <ul className="unstyled">
    {lis}
  </ul>
);
复制代码

 

JSX中绑定事件

JSX让事件直接绑定在元素上。

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称,大括号中仍然是标准的JavaScript表达式,返回一个事件处理函数。

React并不会真正的绑定事件到每一个具体的元素上,而是采用事件代理的模式:在根节点document上为每种事件添加唯一的Listener,然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件,React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理,但是其API和使用方法与原生事件一致。

 

JSX中使用样式

在JSX中使用样式和真实的样式也很类似,通过style属性来定义,但和真实DOM不同的是,属性值不能是字符串而必须为对象。

例如:

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>

或者

复制代码
var style = {
  color: '#ff0000',
  fontSize: '14px'
};

var node = <div style={style}>HelloWorld.</div>;
复制代码

要明确记住,{}里面是JS代码,这里传进去的是标准的JS对象。在JSX中可以使用所有的的样式,基本上属性名的转换规范就是将其写成驼峰写法,例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”,这和标准的JavaScript操作DOM样式的API是一致的。

 

HTML转义

在组件内部添加html代码,并将html代码渲染到页面上。React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以这么写:

复制代码
var content='<strong>content</strong>';    

React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);
复制代码

自定义组件

组件定义之后,可以利用XML语法去声明,而能够使用的XML Tag就是在当前JavaScript上下文的变量名,该变量名就是组件名称。

 

文章来源:
http://www.infoq.com/cn/articles/react-jsx-and-component

<think>嗯,用户想在VS Code中设置或修复JSX语法高亮。首先,我需要回忆一下VS Code如何处理语法高亮。通常,这涉及到语言模式和相关的扩展。JSX通常用于React项目,所以可能需要正确的文件扩展名,比如.jsx或.tsx,或者确保文件的语言模式设置为JavaScript React或TypeScript React。 接下来,可能需要检查用户是否安装了相关的扩展。比如,VSCode默认的JavaScript和TypeScript支持可能已经包括了JSX高亮,但有时候可能需要额外的插件,比如ES6 React Snippets或者Prettier。另外,Vetur插件主要是针对Vue的,可能对JSX支持不够,这时候可能需要禁用或者调整设置。 然后,想到用户可能需要检查他们的文件关联设置。如果.js文件被错误地关联到普通JavaScript而不是JavaScript React,语法高亮可能不会生效。这时候需要手动更改语言模式,或者通过settings.json配置files.associations来关联.jsx到正确的语言模式。 另外,主题也可能影响语法高亮的效果,有些主题可能没有针对JSX的优化颜色方案。建议用户尝试更换主题,比如官方推荐的Dark+或者Material Theme。 还有,用户提到的ESLint和Prettier配置可能和代码格式化有关,但语法高亮更多是编辑器本身的功能。不过,如果存在语法错误,ESLint可能会提示,但不会直接影响高亮。需要确保ESLint配置正确,避免因为语法错误导致高亮中断。 最后,可能需要指导用户通过检查文件扩展名、语言模式、安装必要扩展、调整设置和更换主题来逐步排查问题。如果问题依然存在,可能需要查看控制台是否有错误日志,或者重新安装VS Code。</think>### 如何在 VS Code 中设置或修复 JSX 语法高亮 #### 1. 确保文件扩展名和语言模式正确 - **文件扩展名**:JSX 文件通常以 `.jsx` 或 `.tsx`(TypeScript)结尾。如果文件扩展名为 `.js`,VS Code 可能无法自动识别 JSX 语法。 - **手动切换语言模式**: 1. 打开 JSX 文件后,点击 VS Code 右下角的语言模式标识(如“JavaScript”)。 2. 选择 `JavaScript React` 或 `TypeScript React`(适用于 TSX 文件)[^3]。 #### 2. 安装必要插件 - **ESLint 和 Prettier**:确保代码格式化和语法检查正常(需配置 `.eslintrc` 和 `.prettierrc`)[^2]。 - **React 相关插件**:例如: - **ES7+ React/Redux/React-Native Snippets**(提供代码片段支持) - **Babel JavaScript**(增强 JSX 语法高亮) #### 3. 检查主题兼容性 某些主题可能对 JSX 支持不完善,可尝试切换为官方主题(如 `Dark+ (Default Dark)`)或热门主题(如 `Material Theme`)。 #### 4. 配置 `settings.json` 在 VS Code 设置文件(`settings.json`)中添加以下规则: ```json { "emmet.includeLanguages": { "javascript": "javascriptreact" }, "files.associations": { "*.js": "javascriptreact" } } ``` 此配置将 `.js` 文件关联到 JSX 语法模式[^1]。 #### 5. 验证语法高亮 - 输入 JSX 代码片段,如: ```jsx const App = () => ( <div className="container"> <h1>Hello JSX</h1> </div> ); ``` - 若标签(如 `<div>`)显示为不同颜色,则说明高亮生效。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值