JSX语法

JSX 全名 JavaScript XML

语法和html一致，表达式放入在{}中即可。

和vue模板的差别

<!-- 这是vue模板 -->
<div>
  <div>我在千锋学习了{{day}}天，还有{{90-day}}天我就要毕业了。</div>
  <a href="http://www.baidu.com" />
  <img id="head" :src="url" :style="{ height: '100px', width:'100px' }" />
</div>
<!-- 这是react的JSX -->
<div>
  <div>我在千锋学习了{day}天，还有{90-day}天我就要毕业了。</div>
  <a href="http://www.baidu.com" />
  <img id="icon" src={url} style={{ height: '100px', width:'100px' }} />
</div>

JSX

JSX是react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, children)方法的语法糖。

基本语法规则

• 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签就是自定义的标签。
• 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
• 标签必须自闭合标签，比如 <br /> 不能写成 <br>;
• 由于class在js中是关键字，JSX 里的 class 需要写出 className。
• JSX使用的是小驼峰式命名规则，所以在html中形如 font-size 的命名修改为 fontSize。
• JSX中的样式如果单位是px,可以直接写数字，如：{ height: 100 } 等价于 height：100px。

babel.js的作用

• 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
• 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

如果定义h=React.createElement, babel将上面的JSX代码翻译为：

复制h('div', null, [
  // <div>我在千锋学习了{day}天，还有{90-day}天我就要毕业了。</div>
  h('div', null, `我在千锋学习了${day}天，还有${90-day}天我就要毕业了`),
  // <a href="http://www.baidu.com" />
  h('a', { href: 'http://www.baidu.com' }),
  // <img id="icon" src={url} style={{ height: '100px', width:'100px' }} />
  h('img', { id: 'icon', src: url, style: { height: '100px', width:'100px' } }),
])

JSX中的循环

JSX用for循环

复制const list = [];
for (const i of [0,1,2]) {
  list.push(<li key={i}>row {i}</li>);
}
render(
  <ul>
    {list}
  </ul>
)

JSX用map (通常的做法)

复制render(
  <ul>
    {[0,1,2].map(o=>(<li key={o}>row {o}</li>))}
  </ul>
)

key值的作用

相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。

React 默认按照“就地更新”的策略来更新通过 map 渲染的元素列表。当数据项的顺序改变时，React 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

因此，正式的项目我们不建议用数组的index来作为key。

JSX中的条件

复制let el;
if (score>=90) {
  el = <div>优秀</div>;
} else if (score>=60) {
  el = <div>合格</div>;
} else {
  el = <div>不合格</div>;
}
render(el);

或者

复制render(
  score>=90 &&
  <div>优秀</div>
  ||
  score>=60 &&
  <div>合格</div>
  ||
  <div>不合格</div>
);

或者

复制render(
  score>=90 ?
  <div>优秀</div>
  :
  score>=60 ?
  <div>合格</div>
  :
  <div>不合格</div>
);

完完全全就是js的语法

注释

{/*注释...*/}

独立文件

复制<script type="text/babel" src="./person.js"></script>