# 概述

## 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gitbook.cdxiaodong.life/kuang-jia-an-quan/react/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.