概述

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。

使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入babel后，你就可以使用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的浏览器。

Jsx语法例子

为了更好的理解Jsx语法的特点，我们先看一个官网例子helloworld。

<!DOCTYPE html>
    <html>
    <head>
      <Meta charset="UTF-8" />
      <title>Hello React!</title>
      <script src="vendor-js/react.js"></script>
      <script src="vendor-js/react-dom.js"></script>
      <script src="vendor-js/babel-core/browser.min.js"></script>
    </head>
    <body>
      <div id="example"></div>
      <script type="text/babel"> ReactDOM.render( <h1>Hello,world!</h1>,document.getElementById('example') ); </script>
    </body>
  </html>

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。而如果转化成纯JavaScript 的语法来写：

<script type="text/javascript"> ReactDOM.render( React.DOM.h1(null,'hello,world!'),document.getElementById('example') ); </script>

在JSX语法中有两个地方需要注意：

1,script标签的 type 属性为 text/babel，这是React 独有的 JSX 语法，跟 JavaScript不兼容。凡是在页面中直接使用 JSX 的地方，都要加上 type=”text/babel”。

2,一共用了三个库： react.js 、react-dom.js 和 browser.min.js，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，browser.min.js的作用是将 JSX 语法转为 JavaScript 语法。

Jsx 的特点

jsx语法具有以下特点：

类XML语法容易接受，结构清晰
增强JS语义
抽象程度高，屏蔽DOM操作，跨平台
代码模块化

类XML语法，易于理解

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

var arr = [
 <h1>Hello world!</h1>,<h2>React is awesome</h2>,];
ReactDOM.render(
 <div>{arr}</div>,document.getElementById('example')
);

组件化

使用jsx来将代码封装成React组件，然后像插入普通 HTML 标签一样，在其他地方插入这个组件。使用React.createClass还可以生成一个组件。而采用组件化开发使代码更加清晰，重用性也更高。

var MyComponent=React.createClass({
  render: function() {
   return <h1>Hello world!</h1>;
 }
});
ReactDOM.render(
 <MyComponent />,document.getElementById('example')
);

使用Jsx应注意;

在react中通常约定组件类的第一个字母必须大写，html标签都是小写

//要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
var myDivElement = <div className="foo" />;
React.render(myDivElement,document.getElementById('example'));
//要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent  />;
React.render(myElement,document.getElementById('example'));

组件类只能包含一个顶层标签，否则会报错

//var myDivElement =<h1>你好</h1><h1>hello</h1>;
//上述写法是会报错的，要写成只有一个顶层标签：
var myDivElement =<div><h1>你好</h1><h1>hello</h1></div>;

上述代码一个静态的组件，而使用状态机State可以制作动态组件。来看一个例子:

var MyComponent=React.createClass({
  getInitialState: function() {
       return {clickNum: 0};
  },handleClick:function(){
    var num=this.state.clickNum;
    num++;
    this.setState({clickNum:num});
  },render: function() {
   return (
      <div>
        <h1 onClick={this.handleClick}>Hello {this.props.name}!</h1>
        <h2 style={{color:'red'}}>点击{this.props.name}次数：{this.state.clickNum}</h2>
      </div>
    );
 }
});
ReactDOM.render(
  <div>
     <MyComponent name="张三" />
     <hr/>
     <MyComponent name="李四" />
  </div>,document.getElementById('example')
);

上面代码中定义的MyComponent组件包含属性，状态和事件，是一个简单的比较完整的组件。使用props通过父组件进行传递值，使用state定义组件自己的状态。

关于组件的属性，我们应该注意以下几点：

class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
直接在标签上使用style属性时，要写成style={{}}是两个大括号，外层大括号是告知jsx这里是js语法，和真实DOM不同的是，属性值不能是字符串而必须为对象，需要注意的是属性名同样需要驼峰命名法。即margin-top要写成marginTop。
this.props.children 不要children作为把对象的属性名。因为this.props.children获取的该标签下的所有子标签。this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。

注：如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。

<div data-custom-attribute="foo" />

PropTypes

组件的属性props可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。React中使用PropTypes进行参数的校验。

var MyTitle = React.createClass({
   propTypes: {
     title: React.PropTypes.string.isrequired,},render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面的代码PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串，如果传入的不是字符串，就会报错。

获取DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

var MyComponent = React.createClass({
   handleClick: function() {
     this.refs.myTextInput.focus();
   },render: function() {
     return (
     <div>
       <input type="text" ref="myTextInput" />
       <input type="button" value="Focus the text input" onClick={this.handleClick} />
     </div>
     );
   }
});

为了获取真实的DOM节点，html元素必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

求值表达式

在编写JSX时，在 { } 中不能使用语句（if语句、for语句等等），但可以使用求值表达式，这本身与JSX没有多大关系，是JS中的特性，它是会返回值的表达式。我们不能直接使用语句，但可以把语句包裹在函数求值表达式中运用。

组件生命周期

在React中，组件的生命周期主要有三个状态：

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)：组件判断是否重新渲染时调用

附：http://www.jb51.cc/article/p-ylyffgsx-qr.html

原文链接：https://www.f2er.com/react/304472.html

React基础之JSX语法

概述