概述

ReactJS 概述

ReactJS是一个用于构建用户界面的JavaScript库。

组件和props

组件是ReactJS的基本构建块。从概念上讲，它们就像JavaScript函数。它们接受任意输入props并返回描述屏幕上应该显示什么的React元素。

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

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

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

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

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

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

JSX

React组件使用JSX，这是JavaScript的语法扩展。在构建过程中，JSX代码被转译为常规JavaScript（ES5）代码。

以下两个示例是等价的：

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

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

元素

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

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

此函数接受三个参数：

• type可以是标签名字符串（如div或span），或组件类。

• props包含传递给新元素的属性列表。

• children包含新元素的子节点（它们是额外的React组件）。

设计安全

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

参考

• Exploiting Script Injection Flaws in ReactJS Apps