自学react第二天

标签：react

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

为什么选择JSX？

React 拥抱渲染逻辑与其他 UI 逻辑固有耦合的事实：事件如何处理，状态如何随时间变化以及数据如何准备显示。

通过将标签和逻辑放在单独的文件中，而不是人为分离 技术 ，伴有松散耦合单元的 React 关注点分离 称为“组件（components）”。 我们将在组件(Components) 和 属性(Props) 中详细说明组件 ， 但如果你不习惯在 JS 中添加标签，这篇演讲可能会说服你。

React 不强制你使用JSX ，但大多数人发现它在 JavaScript 代码中使用 UI 时作为视觉辅助工具很有帮助。 它还允许 React 显示更多有用的错误和警告消息。

JSX说明

我们可以将JSX理解为React.createElement(component, props, …children)方法的语法糖。JSX的代码：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

最终会被编译成一个React Element 对象：


React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

我们可以使用“闭标签”来表示没有子元素的情况：

<div className="sidebar" />

它会编译成：

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

如果你想尝试各种JSX是如何转换成JavaScript代码的，你可以打开这个网站试试：the online Babel compiler。

在JSX中嵌入表达式

在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用 花括号 将其括起来：

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

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

你可以用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。例如，2 + 2， user.firstName， 和 formatName(user)，这些都是可用的表达式。

在下面的例子中，我们将调用 JavaScript 函数 formatName(user) 的结果嵌入到 h1 元素中。

JSX 也是一个表达式

编译之后，JSX 表达式就变成了常规的 JavaScript 对象。

这意味着你可以在 if 语句或者是 for 循环中使用 JSX，用它给变量赋值，当做参数接收，或者作为函数的返回值：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

用 JSX 指定属性值

您可以使用双引号来指定字符串字面量作为属性值：

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

您也可以用花括号嵌入一个 JavaScript 表达式作为属性值:

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

在属性中嵌入 JavaScript 表达式时，不要使用引号将花括号括起来。您应该使用引号（用于字符串值）或大括号（用于表达式），但不能同时使用同一个属性。

用 JSX 指定子元素

如果是空标签，您应该像 XML 一样，使用 />立即闭合它：

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

JSX 标签可能包含子元素：

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

JSX 防止注入攻击

在JSX中嵌入用户输入是安全的：

const title = response.potentiallyMaliciousInput;
// 这样是安全的:
const element = <h1>{title}</h1>;

默认情况下， 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。

JSX 表示对象

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，并且保持它们的不断更新。

Written on 2019-02-25
上篇： 自学react第一天
下篇： 自学react第三天