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攻击。

JSX对象

首先需要强调的是，JSX对象就是一个JavaScript对象，所有的JSX表达式最终都会转义成JavaScript。有两种方法可以创建JSX对象：

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

和

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

上面2种创建JSX对象的方法结果都是一样的。使用React.createElement() 方法的好处是它会执行一些检查，以帮助我们编写无错误的代码。最终通过转义，他会输出这样一个结构：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

官方将这个对象的结构称为React元素。React通过这个对象来控制浏览器对dom的渲染，最终显示我们想要的内容。

渲染React元素

前一小节提到的React元素是React的基本单元，React会由一个一个的基本单元组成，最终构建成一个有效的体系（组件化）。每一个元素用来描述想在屏幕上展示什么。

和Dom结构不同的是， React元素是一个纯粹的对象并且比创建一个Dom花费的资源更少。React会全局维护所有的元素，并在合适的时候更新到浏览器的Dom，这就是虚拟Dom管理机制。

将一个元素渲染成为Dom

从一个简单的div标签开始：

<div id="root"></div>

这是一个“根元素”，我们将通过ReactDom来管理他的所有子元素。一个RreactDom.render方法只能用来渲染一个Dom元素。如果想同时对多个元素进行渲染，可以使用互不关联的RreactDom.render方法来对不同的Dom元素进行操作。

下面的例子将一个JSX元素渲染到Dom中，完成后，会在页面中显示Hello world：

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

测试代码

更新已被渲染的元素

React元素是不可变对象，一旦创建，将不再能够修改，包括其属性和子元素。更新UI的方法就是创建一个新的元素并用ReactDom.render()再次渲染他。如下面的例子：

//创建一个tick方法，用于执行重复方法
function tick() {
  //创建一个JSX对象
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

测试代码

上面代码中创建了一个tick方法，并使用setInterval让这个方法每1秒执行一次。tick中创建了一个用于显示时间的JSX对象，然后将其渲染到#root节点中。运行代码可以看到例子实现了一个时钟功能，每秒都会调用ReactDom.render动态修改时钟的数字。

需要强调的是：重复使用ReactDom.render方法来多次渲染Dom并不是React推崇的方法。后续的内容中会介绍更合理的方法。

React只执行必要的更新

ReactDom会将当前的元素与之前的元素进行比对，并且只会更新被改动部分的Dom以避免全局渲染和多次重复渲染。我们可以通过浏览器工具来验证最后一个例子——我们使用render方法创建了整个Dom结构，但是仅仅只有表示时间的文字部分发生了变动。

组件与属性

组件是React的重要概念，组件能让我们将整个页面的UI分解成独立、可复用、可继续分割的对象。从概念上来说，组件很像JavaScript的一个方法，他可以接受任意的参数输入（React中将这些参数称呼为属性——Props）并返回一个用于UI展示的React元素。

使用函数或类声明组件

在React中既可以使用function来声明一个组件，也可以使用ES6规范的class关键字来声明一个组件。下面的例子是使用function创建一个组件：

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

例子中使用function声明了一个名为Welcome的组件，他只能接收一个参数用于描述组件的元素。在React中，我们将通过function创建的组件命名为“functional”，因为从字面上看它实际上就是一个JavaScript的函数。

下面的例子是使用ES6 class方式声明一个组件：

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

//JavaScript 非官方内容
var Welcome = React.createClass({
   render: function () {
     return <h1>Hello, {
   this.props.name}</h1>;
   }
});
//

上面两种创建组件的方式，从React的角度来说是一样的。

与使用方法创建组件相比，使用ES6 class的方式创建组件有更多特性，后续篇幅会说明。

渲染一个组件

为了便于说明，我们先用

const element = <div />;

const element = <Welcome name="Sara" />;

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

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

function App() {
    //创建App组件
  return (
    

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name} 
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />//使用Avatar组件
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} /> //使用Avatar组件
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} /> //使用UserInfo组件
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function sum(a, b) {
  return a + b;
}

var param1 = 1,
    param2 = 2,
    result = sum(1, 2);