JSX语法介绍

1,717 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

什么是JSX?

const element = <h1>Hello, world!</h1>;

JSX就是JavaScript Xml,是一个 JavaScript 的语法扩展,具有 JavaScript 的全部功能。在React中,没有将渲染和逻辑分离,而是存放在一个组件中。是在React内部构建类Xml语法。React也可以不用xml, 但是使用Jsx可以提高组件的可读性。

在JSX中嵌入表达式

用大括号包裹。其中大括号中可以放置有效的js表达式。

const element = <h1>Hello, {name}</h1>;

JSX是一个表达式

编译之后,JSX表达式会转为普通的js函数调用,可以把JSX赋值给变量,当做参数传入。

JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,例如:className。

JSX表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

这两种方式完全一致。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()会预先执行一些检查,实际上它创建了一个这样的对象:

// 注意:这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

元素 React元素是不可变对象,一旦创建们,无法更改它的子元素或属性,更新 UI 唯一的方式是创建一个全新的元素,并将其传入 root.render()

函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

注:组件名称必须以大写字母开头,和标签可以区分开 JSX语法 JSX语法和html语言一样,清晰明了。

<div>
   <h1>题目</h1>
   <h2>语文</h2>
</div>

创建React对象

// JSX 语法
const el = (<h1>Hello JSX!</h1>)
// 渲染
ReactDOM.render(el, document.querySelector('#root'))

注意点

  1. react 元素的属性名使用驼峰命名法:tabindex --> tabIndex
  2. 特殊属性名: class --> className 、for --> htmlFor
  3. 在 react 中所有的标签都必须闭合,无论是单标签还是双标签
  4. 推荐:使用小括号包裹 JSX 结构,从而避免 JS 中的自动插入分号陷阱