002|React之JSX入门

下面的代码即不是HTML，也不是JavaScript，而是JSX：

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

JSX语言允许在常规JavaScript语句中直接插入HTML的语言。JSX语言中的HTML代码段叫做JSX表达式，经编译后，它就是一段JavaScript对象。

因为JSX表达式本质是JavaScript对象，所以它可以用于任何语句中，如if、for：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>; // 在if语句中使用JSX表达式
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX的HTML标签时，也可以再插入JavaScript。如：

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}! // 插入函数调用
  </h1>
);

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

上述代码，通过在HTML元素内使用{}来插入JavaScript代码。

和普通的HTML一样，JSX表达式中的标签可以指定特性（attributes） 。需要注意，这些特性以骆驼法（camelCase）命名。

const element = <div tabIndex="0"></div>; // 直接赋值
const element = <img src={user.avatarUrl}></img>; // 嵌入JavaScript赋值

一个HTML标签可以包含若干个子标签：

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

JSX表达式被编译后，成为一段生成一个对象的JavaScript代码：

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

// 编译后的代码
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 生成相当于如下的对象
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这个由JSX表达式生成的对象，叫做React元素（Element）。

什么是组件？什么是State？什么是Props？

好，这一节就到这里。后续我将逐步介绍React技术细节，来慢慢解答上述问题。

想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。