JSX

# JSX

我们在上文中已经很多次的提及了JSX，大家也对于基本的基于JSX编写React组件所有了解。实际上在JSX推出之初饱受非议，很多人觉得其很怪异。的确虽然与正统的HTML相比其都是类XML语法的声明式标签语言，但是其对于类名强制使用className、强制要求标签闭合等特点会让不少的传统前端开发者不太适应。JSX的引入对笔者之前的工作流的冲击在于不能够直接使用UI部门提供的页面模板，并且因为组件化的分割与预编译，UI比较麻烦地直接在浏览器开发工具中调整CSS样式然后保存到源代码中。JSX本质上还是属于JavaScript，这就避免了我们重复地学习不同框架或库中的指令约定，而可以直接使用JavaScript来描述模板渲染逻辑；而在前端框架的工作流中，往往将JSX的转化工作交托于Babel等转化工具，我们可以通过如下方式指定JSX使用的构建函数：

/** @jsx h */

# JSX的前世今生

JSX语言的名字最早出现在游戏厂商DeNA，不过其偏重于加入增强语法使得JavaScript变得更快、更安全、更简单。而React则是依赖于ECMAScript语法本身，并没有添加扩充语义。React引入JSX主要是为了方便View层组件化，承载了构建HTML结构化页面的职责。这一点与其他很多的JavaScript模板语言异曲同工，不过React将JSX映射为虚拟元素，并且通过创建与更新虚拟元素来管理整个Virtual DOM系统。譬如我们JSX语法声明某个虚拟组件时，会被转化为React.createElement(component,props,...children)函数调用，譬如我们定义了某个MyButton：

// 必须要在 JSX 声明文件中引入 React
import React from "react";

<MyButton color="blue" shadowSize={2}>
    Click Me
</MyButton>;

会被编译为：

React.createElement(MyButton, { color: "blue", shadowSize: 2 }, "Click Me");

而如果我们直接声明某个DOM元素，同样会转化为createElement函数调用:

React.createElement("div", { className: "sidebar" }, null);

实际上除了最著名的Babel JSX转换器之外，我们还可以使用 JSXDOM 与 Mercury JSX 这两个同样的可以将JSX语法转化为DOM或者Virtual DOM。在JSXDOM中，只支持使用DOM元素，允许在DOM标签中直接使用JavaScript变量，譬如当我们需要声明某个列表时，可以使用如下语法:

/** @jsx JSXDOM */

var defaultValue = "Fill me ...";

document.body.appendChild(
  <div>
        
    <input type="text" value={defaultValue} />
        <button onclick="alert('clicked!');">Click Me!</button>
        <ul>
            
      {["un", "deux", "trois"].map(function(number) {
        return <li>{number}</li>;
      })}
          
    </ul>
      
  </div>
);

这里我们还想讨论另一个问题，为什么需要引入JSX。在ECAMScript 6的ECMA-262标准中引入了所谓的模板字符串(Template Literals)，即可以在ECMAScript中使用内嵌的DSL来引入JavaScript变量，不过虽然模板字符串对于较长的嵌入式DSL作用极佳，但是对于需要引入大量作用域中的ECMAScript表达式会造成大量的噪音副作用，譬如如果我们要声明某个评论框布局，使用JSX的方式如下:

// JSX
var box = (
  <Box>
        
    {shouldShowAnswer(user) ? (
      <Answer value={false}>no</Answer>
    ) : (
      <Box.Comment>Text Content</Box.Comment>
    )}
      
  </Box>
);

而使用模板字符串的方式如下:

// Template Literals
var box = jsx`
  <${Box}>
    ${
  shouldShowAnswer(user)
    ? jsx`<${Answer} value=${false}>no</${Answer}>`
    : jsx`
        <${Box.Comment}>
         Text Content
        </${Box.Comment}>
      `
}
  </${Box}>
`;

其主要缺陷在于因为存在变量的嵌套，需要在作用域中进进出出，很容易造成语法错误，因此还是JSX语法为佳。

JSX语法

JSX的官方定义是类XML语法的ECMAscript扩展，完美地利用了JavaScript自带的语法和特性，并使用大家熟悉的HTML语法来创建虚拟元素。JSX基本语法基本被XML囊括了，但也有很多的不同之处。React在定义标签时，标签一定要闭合，否则无法编译通过。这一点与标准的HTML差别很大，HTML在浏览器渲染时会自动进行补全，而强大的JSX报错机制则直接在编译阶段就以报错的方式指明出来。HTML中自闭合的标签(如<img>)在JSX中也遵循同样规则，自定义标签可以根据是否有子组件或文本来决定闭合方式。另外DOCTYPE头也是一个非常特殊的标志，一般会在使用React作为服务端渲染时用到。在HTML中，DOCTYPE是没有闭合的，也就是说我们无法直接渲染它。常见的做法是构造一个保存HTML的变量，将DOCTYPE与整个HTML标签渲染后的结果串联起来。使用JSX声明组件时，最外层的组件根元素只允许使用单一根元素。这一点我们在上文中也陈述过，因为JSX语法会被转化为 React.createElement(component,props,...children) 调用，而该函数的第一个参数只允许传入单元素，而不允许传入多元素。

变量使用

  • 注释

在HTML中，我们会使用 <!-- --> 进行注释，不过JSX中并不支持：

render() {
  return (
  <div>
  <!-- This doesn't work! -->
  </div>
  )
}

我们需要以JavaScript中块注释的方式进行注释：

{
  /* A JSX comment */
}

{
  /*
  Multi
  line
  comment
*/
}
  • 数组

JSX允许使用任意的变量，因此如果我们需要使用数组进行循环元素渲染时，直接使用map、reduce、filter等方法即可：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map(number => (
        <ListItem key={number.toString()} value={number} />
      ))}
    </ul>
  );
}
  • 条件渲染

在JSX中我们不能再使用传统的if/else条件判断语法，但是可以使用更为简洁明了的Conditional Operator运算符，譬如我们要进行if操作：

{condition && <span>为真时进行渲染</span> }

如果要进行非操作：

{
  condition || <span>为假时进行渲染</span>;
}

我们也可以使用常见的三元操作符进行判断:

{
  condition ? <span>为真时进行渲染</span> : <span>为假时进行渲染</span>;
}

如果对于较大的代码块，建议是进行换行以提升代码可读性：

{
  condition ? <span>   为假时进行渲染 </span> : <span>   为假时进行渲染 </span>;
}

元素属性

  • style属性

JSX中的style并没有跟HTML一样接收某个CSS字符串，而是接收某个使用camelCase风格属性的JavaScript对象，这一点倒是和DOM对象的style属性一致。譬如:

const divStyle = {
  color: "blue",
  backgroundImage: "url(" + imgUrl + ")"
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

注意，内联样式并不能自动添加前缀，这也是笔者不太喜欢使用CSS-in-JS这种形式设置样式的的原因。为了支持旧版本浏览器，需要提供相关的前缀：

const divStyle = {
  WebkitTransition: "all", // note the capital 'W' here
  msTransition: "all" // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}
  • className

React中是使用 className 来声明CSS类名，这一点对于所有的DOM与SVG元素都起作用。不过如果你是将React与Web Components结合使用，也是可以使用 class 属性的。

  • htmlFor

因为 for 是JavaScript中的保留关键字，因此React元素是使用 htmlFor 作为替代。

  • Boolean系列属性

HTML表单元素中我们经常会使用disabled、required、checked与readOnly等Boolean值性质的书，缺省的属性值会导致JSX认为bool值设为true。当我们需要传入false时，必须要使用属性表达式。譬如 <input type='checkbox' checked={true}> 可以简写为<input type='checkbox' checked>，而 <input type='checkbox' checked={falsed}> 即不可以省略checked属性。

  • 自定义属性

如果在JSX中向DOM元素中传入自定义属性，React是会自动忽略的:

<div customProperty='a' />

不过如果要使用HTML标准的自定义属性，即以 data-* 或者 aria-* 形式的属性是支持的。

<div data-attr='attr' />

子元素

JSX表达式中允许在一对开放标签或者闭合标签之间包含内容，这即是所谓的子元素，本部分介绍JSX支持的不同类别的子元素使用方式。

  • 字符串

我们可以将字符串放置在一对开放与闭合的标签之间，此时所谓的 props.children 即就是字符串类型；譬如：

<MyComponent>Hello World!</MyComponent>

就是合法的JSX声明，此时 MyComponent 中的 props.children 值就是字符串 Hello World!；另外需要注意的是，JSX会自动移除行首与行末的空格，并且移除空行，因此下面的三种声明方式渲染的结果是一致的：

<div>Hello World</div>
<div>
  Hello World
</div>
<div>
  Hello
  World
</div>
<div>
  Hello World
</div>
  • JSX嵌套我们可以嵌套地使用JSX，即将某些JSX元素作为子元素，从而允许我们方便地展示嵌套组件：
<MyContainer>
    <MyFirstComponent />
    <MySecondComponent />
</MyContainer>

我们可以混合使用字符串与JSX，这也是JSX很类似于HTML的地方：

<div>
    Here is a list:
  <ul>
      <li>Item 1</li>  <li>Item 2</li> 
  </ul>
</div>

某个React组件不可以返回多个React元素，不过单个JSX表达式是允许包含多个子元素的；因此如果我们希望某个组件返回多个并列的子元素，就需要将它们包裹在某个 div 中。

  • JavaScript表达式我们可以传入包裹在 {} 内的任意JavaScript表达式作为子元素，譬如下述声明方式渲染的结果是相同的：
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>

这种模式常用于渲染HTML列表：

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ["finish doc", "submit pr", "nag dan to review"];

  return (
    <ul>
      {todos.map(message => (
        <Item key={message} message={message} />
      ))}
    </ul>
  );
}
  • JavaScript函数正常情况下JSX中包含的JavaScript表达式会被解析为字符串、React元素或者列表；不过 props.children 是允许我们传入任意值的，譬如我们可以传入某个函数并且在自定义组件中调用：
// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
        {index => <div key={index}>This is item {index} in the list</div>} 
    </Repeat>
  );
}
  • 布尔值与空值 false，null，undefined 与 true 是有效的子元素，不过它们并不会被渲染，而是直接被忽略，如下的JSX表达式会被渲染为相同结果：
<div />


<div></div>


<div>{false}</div>


<div>{null}</div>


<div>{undefined}</div>


<div>{true}</div>

避免XSS注入攻击

最后需要提及的是，React中JSX能够帮我们自动防护部分XSS攻击，譬如我们常见的需要将用户输入的内容再呈现出来:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

在标准的HTML中，如果我们不对用户输入作任何的过滤，那么当用户输入 <script>alert(1)<script/> 这样的可执行代码之后，就存在被XSS攻击的危险。而React在实际渲染之前会帮我们自动过滤掉嵌入在JSX中的危险代码，将所有的输入进行编码，保证其为纯字符串之后再进行渲染。不过这种安全过滤有时候也会对我们造成不便，譬如如果我们需要使用 &copy; 这样的实体字符时，React会自动将其转移最后导致无法正确渲染，我们可以寻找如下几种解决方法： -直接使用UTF-8字符或者使用对应字符的Unicode编码 -使用数组封装 -直接插入原始的HTML，React为我们提供了dangerouslySetInnerHTML属性，其类似于DOM的innerHTML属性，允许我们声明强制直接插入HTML代码:

function createMarkup() {
  return { __html: "First &middot; Second" };
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
上一页
下一页

最近更新于0001-01-01