React JSX语法与组件

JSX基础介绍

先看看一个最简单的例子：

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

上面这段有趣的例子既不是标准的JavaScript也不是HTML，它就是我们接下来要介绍的JSX的语法，是一种JavaScript的扩展。在React中使用JSX描述一个UI是什么样子的，就好像HTML告诉浏览器我们看到的页面是什么样子。最开始接触JSX时会感觉它很像一种模板语言，但是除了提供模板能力之外，他拥有JavaScript所有的能力。

JSX用于产生React的组件，JSX最大的特色就是就是在JavaScript中嵌入和HTML表达式。我们先看下面这个例子：

function formatName(user) { //将参数合并成一个srting return user.firstName + ' ' + user.lastName; } //创建user对象 const user = { firstName: 'Harper', lastName: 'Perez' }; //创建element对象，并用JSX语法标识为一个html内容。 //h1标签中会包含方法计算之后的内容 const element = ( <h1> Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') );

这个例子将JSX语法分成了很多部分，element就是一个HTML的JSX表达式，HTML标签最好使用一组()括号包裹起来以避免分号导致的问题（分号可能会在编译时成为HTML内容的一部分）。ReactDOM是一个react工具，用于提供Dom渲染功能。ReactDOM.render 方法接受2个参数，一个是要渲染的JSX元素，另外一个是Dom对象，render会在这个Dom对象中添加由JSX定义的HTML。

JSX是一种丰富的表达式，他可以随意嵌套JavaScript和HTML使用，例如if、for等等，比如：

function getGreeting(user) { // 使用if来判断输入参数，根据判断结果来输出HTML内容 if (user) { return <h1>Hello, {formatName(user)}</h1>; } return <h1>Hello, Stranger.</h1>; }

源生的HTML可以任意指定属性，同样在JSX中也有这个能力，例如：

const element = <div tabIndex="0"></div>; //或 const element = <img src={user.avatarUrl}></img>;

也可以直接用 />表示一个HTML标签的闭环：

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

当然也可以同时声明父元素和子元素：

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

需要注意的是：由于JSX更像JavaScript，在使用JSX语法时建议使用驼峰规范来命名。例如将标签上的"class"命名为"className"。

JSX天生具备防止注入攻击的能力。ReactDom在渲染之前会转义所有嵌入JSX中的值，所以他能确保没有任何特殊的内容被注入到最终的HTML代码中。在渲染之前，所有的东西都会转换成string类型，这将能有效的防止XSS攻击。