JSX语法基础(二)

求值表达式

要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 ( { } ) 包起来。
在编写JSX时，在 { } 中不能使用语句（if语句、for语句等等），但可以使用求值表达式，这本身与JSX没有多大关系，是JS中的特性，它是会返回值的表达式。我们不能直接使用语句，但可以把语句包裹在函数求值表达式中运用。
条件判断的写法
你没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法。在 { } 中使用，是不合法的JS代码，不过可以采用三元操作表达式

var HelloMessage = React.createClass({ 
  render: function() { 
    return 
Hello {this.props.name ？ this.props.name : "World"}
; 
  }
});
ReactDOM.render(, document.body);

可以使用比较运算符“ || ”来书写，如果左边的值为真，则直接返回左边的值，否则返回右边的值，与if的效果相同。

var HelloMessage = React.createClass({ 
  render: function() { 
    return 
Hello {this.props.name || "World"}
; 
  }
});

函数表达式
（ ）有强制运算的作用

var HelloMessage = React.createClass({ 
  render: function() { 
    return 
Hello { 
    （function(obj){ 
        if(obj.props.name) 
          return obj.props.name 
        else 
          return "World" 
      }(this)) 
    }
; 
  }
});
ReactDOM.render(, document.body);

外括号“ ）”放在外面和里面都可以执行。唯一的区别是括号放里面执行完毕拿到的是函数的引用，然后再调用“function(){}(this)()”；括号放在外面的时候拿到的事返回值。
组件的生命周期
组件的生命周期分成三个状态：

* Mounting：已插入真实 DOM
* Updating：正在被重新渲染
* Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

* componentWillMount()
* componentDidMount()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

* componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
* shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

注释
JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

{/* 一般注释, 用 {} 包围 */}

JSX 语法实例

使用的还是之前的项目文件和代码，打开程序的入口文件 index.js 文件。

./src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

在最后一行的 rander 方法中，第一个参数是 ，跟我们平时写的 html 标签差不多的代码块，它的意思是使用 App 这个组件。
我们打开 App.js 这个文件，这里面是 App 组件的主要内容。这个组件渲染的内容，是由下面的 rander 函数返回的结果所决定的。

./src/App.js:
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      
Hello World
    );
  }
}

export default App;

上面 rander 函数返回了一个 h1 标签，标签里的内容是 Hello World 。
正常情况下，我们的标签是写在 html 文件里的，现在我们把这种标签写在了 js 文件里。在 React 中， js 文件中写的这些 html 标签就是我们的 JSX 语法。
在 React 中，我们不仅仅只是可以用 html 现有的标签，还可以使用自己定义的标签。
在一开是我们看的 index.js 文件中，有一个 的语法，这个就是我们自定义的标签。在 JSX 语法中，如果我们要使用自己创建的组件，我们直接通过这种标签形式来使用我们定义的组件名。

import App from './App'; 这句语句中 import 后面的 App 就是我们定义的标签名。

特别注意，我们定义的标签名是有特定的规则的，必须是大写字母开头。
在 React 中，当你看到大写字母开头的标签，你就会知道它是一个组件，全是小写字母的标签就是 html 中所使用的标签。