# 概述

## ReactJS 概述

[ReactJS](https://reactjs.org/)是一个用于构建用户界面的JavaScript库。

### 组件和props

[组件](https://reactjs.org/docs/components-and-props.html)是ReactJS的基本构建块。从概念上讲，它们就像JavaScript函数。它们接受任意输入`props`并返回描述屏幕上应该显示什么的React元素。

定义组件的最简单方法是编写一个JavaScript函数：

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

这个函数是一个有效的React组件，因为它接受一个`props`（代表属性）对象参数并返回一个React元素。这样的组件被称为`函数组件`，因为它们字面上就是JavaScript函数。

定义组件的另一种方法是使用ES6类：

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

从React的角度来看，以上两个组件是等价的。

### JSX

React组件使用[JSX](https://jsx.github.io/)，这是JavaScript的语法扩展。在构建过程中，JSX代码被转译为常规JavaScript（ES5）代码。

以下两个示例是等价的：

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

// 转译为createElement()调用
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
```

### 元素

使用`createElement`函数从组件类创建新的React元素：

```javascript
React.createElement(
  type,
  [props],
  [...children]
)
```

此函数接受三个参数：

* `type`可以是标签名字符串（如`div`或`span`），或组件类。
* `props`包含传递给新元素的属性列表。
* `children`包含新元素的子节点（它们是额外的React组件）。

### 设计安全

ReactJS在设计上实现了安全控制，例如，视图中的字符串变量会自动转义。

## 参考

* [Exploiting Script Injection Flaws in ReactJS Apps](https://medium.com/dailyjs/exploiting-script-injection-flaws-in-reactjs-883fb1fe36c1)
