ReactJS JSX

1,783 words

JSX(JavaScript and XML)是ReactJS定义的一种JavaScript语法扩展. JSX是可选的, 我们完全可以使用JavaScript编写ReactJS应用, 不过JSX提供一套更为简洁的方式来写ReactJS应用.

1
2
3
4
5
6
// 使用JSX
const bar = (
  <h1 className='bingo'>
    hello world!
  </h1>
);
1
2
3
4
5
6
// 不使用JSX
const bar = React.createElement(
  'h1',
  { className: 'bingo' },
  'hello world!'
);

但是JSX有以下优点:

  • 它更快, 因为它将代码编译为JavaScript时执行优化
  • 它很安全, 编译期间可以捕获大多数错误
  • 你熟悉HTML, 可以很轻松, 快速的编写模板
1
2
3
4
5
6
7
8
// 在JSX中括号内允许放置任何有效的JavaScript表达式
const name = 'Mike';
const element = <h1>hello, { name }</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

当JSX拆分为多行时, 我们应该将其包在一个括号内, 避免浏览器自动插入分号

1
2
3
4
5
6
7
8
// 我们可以在if语句和for循环中使用JSX, 将其分配给变量, 接收它作为参数, 并从函数返回它
function foo(user) {
  if (user) {
    return <h1>hello, { user }!</h1>;
  } else {
    return <h1>hello, Mary!</h1>
  }
}
1
2
// 我们可以使用引号将字符串文字指定为属性
const bar = <div tabIndex='0'></div>;
1
2
// 我们可以使用大括号在属性中嵌入JavaScript表达式
const bar = <img src={ user.name }></img>;

在JSX的标签中的同一属性上不能同时使用引号和大括号, JSX中采用cameCase(驼峰式)属性命名约定, class属性应该变成className, tabindex属性应该变成tabIndex, for属性应该变成htmlFor.

1
2
// 在JSX中所有标签都要闭合
const bar = <img src={ user.name } />;
1
2
3
4
5
6
7
// 在JSX中的标签可以包含子标签
const bar = (
  <div>
    <h1>Hello!</h1>
    <p>what a wonderful world.</p>
  </div>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 在JSX中使用注释
const bar = (
  {
    // comment
    // ...
  }
  {/* comment */}
  <div>
    <h1>Hello!</h1>
    {
      /*
      comment
      ...
      */
    }
    <p>what a wonderful world.</p>
  </div>
);

总结:

  • 在JSX中可以插入任何JavaScript表达式, 表达式需要用{}包裹起来, 插入字符串用""包裹
  • JSX表达式可以像JavaScript对象一样, 可以被赋值, 传参和return
  • JSX分割成多行时, 需要使用()包裹起来, 避免浏览器自动插入分号
  • JSX中的所有标签必须闭合
  • JSX属性采用驼峰式命名, class属性应该写成className, tabindex属性应该写成tabIndex, for属性应该写成htmlFor
  • JSX在渲染之前, 所有东西转换为字符串, 可以防止XSS攻击
  • Babel通过调用React.createElement()API来编译JSX, React必须在JSX代码的作用域内
  • JSX通过React.createElement()API将JSX转化为React Object
ReactJS