JSX学习笔记

简介

const element = <h1>Hello!</h1>JSX是一种JavaScript的语法扩展，看起来像是模板语言，事实上它是JavaScript内部实现。JSX用来声明React当中的元素。

基本语法

在JSX中使用表达式

可以任意在JSX当中使用JavaScript表达式，在JSX当中的表达式要包含在大括号里。

function formatName(user){
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Yanwei',
lastName:'Zhang'
}

const element = (
  <h1>
    Hello, {formatName(user)}!
</h1>
)

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

CodePen结果

JSX属性

可以使用引号来定义以字符串为值的属性：

const element = <div tabIndex="0"></div>;

也可以使用大括号来定义以JavaScript表达式为值的属性

const element = ><img src={user.avatarUrl}></img>;

注意，如果使用了大括号包裹的JavaScript表达式，就不要使用引号报过了。JSX会将引号中的内容识别为字符串而不是表达式。

JSX嵌套

JSX标签同样可以相互嵌套

  const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

注意：
JSX 的特性更接近 JavaScript 而不是 HTML，所以ReactDOM使用小驼峰命名来定义属性名称，class变成了className

JSX 防注入攻击

我们可以放心地在 JSX 当中使用用户输入。
React DOM 所有的内容在渲染之前都被转换成了字符串。

React.createElement()方法

Babel 转义器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
下面两种代码的作用是完全相同的：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

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

React.createElement()这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面的对象：

const element = {
  type:'h1',
  props: {
    className: 'greeting',
    children:'Hello,world'  
  }
}

这样的对象呗成为“React元素”。代表所有我们在屏幕上看到的东西。React通过读取这些对象来构建DOM并保持数据内容一致。